@agent-native/core 0.101.14 → 0.102.1

package/corpus/templates/tasks/app/components/tasks/TaskListRow.tsx

@@ -0,0 +1,307 @@
+import { IconChecks, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { selectColorClass } from "@/components/custom-fields/editor/config/select-colors";
+import type { SortableItemRenderProps } from "@/components/dnd/SortableItem";
+import {
+  InlineEditable,
+  LIST_ROW_TITLE_FIELD_CLASS,
+} from "@/components/shared/InlineEditable";
+import { ListRow } from "@/components/shared/list/ListRow";
+import { ListRowDragHandle } from "@/components/shared/list/ListRowDragHandle";
+import { RowActionsMenu } from "@/components/shared/RowActionsMenu";
+import type { ListSelection } from "@/components/shared/selection/use-list-selection";
+import { useTaskRowCompletionAnimation } from "@/components/tasks/use-task-row-completion-animation";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import type { TaskFieldValue } from "@/hooks/use-custom-fields";
+import {
+  TASK_CARD_FIELD_LIMIT,
+  useVisibleTaskFieldIds,
+} from "@/hooks/use-visible-task-fields";
+import { cn } from "@/lib/utils";
+
+import "./TaskListRow.css";
+
+export interface TaskListRowProps {
+  sortable: SortableItemRenderProps;
+  selection: ListSelection<{ id: string }>;
+  item: { id: string; title: string };
+  fields?: TaskFieldValue[];
+  done?: boolean;
+  highlighted?: boolean;
+  hideAfterComplete: boolean;
+  onOpenDetails: () => void;
+  onUpdateTitle: (title: string) => Promise<unknown>;
+  onUpdateDone: (done: boolean) => Promise<unknown>;
+  onRequestDelete: () => void;
+  onBeginExit: () => void;
+  onExitAfterComplete: () => void;
+}
+
+export function TaskListRow({
+  sortable,
+  selection,
+  item,
+  fields,
+  done = false,
+  highlighted = false,
+  hideAfterComplete,
+  onOpenDetails,
+  onUpdateTitle,
+  onUpdateDone,
+  onRequestDelete,
+  onBeginExit,
+  onExitAfterComplete,
+}: TaskListRowProps) {
+  const selected = selection.state.selectedItems.some(
+    (entry) => entry.id === item.id,
+  );
+  const [displayTitle, setDisplayTitle] = useState(item.title);
+
+  const completion = useTaskRowCompletionAnimation({
+    taskDone: done,
+    hideAfterComplete,
+    onBeginExit,
+    onExitAfterComplete,
+    onUpdateTask: (patch) => onUpdateDone(patch.done),
+  });
+
+  if (completion.completionPhase === "exited") {
+    return null;
+  }
+
+  const displayDone = completion.displayDone;
+  const completionPhase = completion.completionPhase;
+  const busy = completion.isAnimating;
+
+  return (
+    <ListRow
+      sortable={sortable}
+      item={item}
+      itemLabel={displayTitle}
+      selection={selection}
+      highlighted={highlighted}
+      onActivate={onOpenDetails}
+      onAnimationEnd={completion.handleRowAnimationEnd}
+      dataAttributes={{ "data-task-id": item.id }}
+      className={cn(
+        "will-change-[opacity,transform]",
+        displayDone && completionPhase === "idle" && !selected && "opacity-60",
+        completionPhase === "completing" &&
+          hideAfterComplete &&
+          "task-row-exit opacity-60",
+        completionPhase === "completing" &&
+          !hideAfterComplete &&
+          "task-row-complete opacity-60",
+        completionPhase === "uncompleting" && "task-row-restore",
+      )}
+    >
+      {({ rowDrag, rowSelection }) => {
+        const selectionTitleClassName = cn(
+          LIST_ROW_TITLE_FIELD_CLASS,
+          "flex items-center truncate border-transparent bg-transparent text-left text-foreground",
+          displayDone && "line-through text-muted-foreground",
+          rowSelection.selected && displayDone && "text-foreground/80",
+        );
+
+        return (
+          <>
+            <ListRowDragHandle
+              rowDrag={rowDrag}
+              rowSelection={rowSelection}
+              displayTitle={displayTitle}
+              disabled={busy}
+            />
+
+            <Checkbox
+              checked={displayDone}
+              disabled={busy}
+              onCheckedChange={completion.handleDoneToggle}
+              onClick={
+                rowSelection.selectionMode ? rowSelection.selectRow : undefined
+              }
+              aria-label={`Mark ${displayTitle} ${displayDone ? "incomplete" : "complete"}`}
+            />
+
+            <div className="min-w-0 flex-1">
+              {rowSelection.selectionMode ? (
+                <div className={selectionTitleClassName}>{displayTitle}</div>
+              ) : (
+                <InlineEditable
+                  value={item.title}
+                  onSave={onUpdateTitle}
+                  onDisplayTitleChange={setDisplayTitle}
+                  ariaLabel="Edit title"
+                  disabled={busy}
+                  titleDragProps={rowDrag.titleDragProps}
+                  displayDone={displayDone}
+                />
+              )}
+              <div className="min-w-0 md:hidden">
+                <TaskListRowFieldBadges fields={fields} />
+              </div>
+            </div>
+
+            <div className="hidden min-w-0 shrink-0 md:block">
+              <TaskListRowFieldStrip fields={fields} />
+            </div>
+
+            <RowActionsMenu
+              ariaLabel={`Actions for ${displayTitle}`}
+              disabled={busy || rowSelection.selectionMode}
+            >
+              <DropdownMenuItem
+                className="gap-2"
+                onSelect={() => selection.actions.startSelection(item.id)}
+              >
+                <IconChecks className="size-4" />
+                Select
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="gap-2 text-destructive focus:bg-destructive focus:text-destructive-foreground"
+                onSelect={onRequestDelete}
+              >
+                <IconTrash className="size-4" />
+                Delete
+              </DropdownMenuItem>
+            </RowActionsMenu>
+          </>
+        );
+      }}
+    </ListRow>
+  );
+}
+
+function TaskListRowFieldBadges({ fields }: { fields?: TaskFieldValue[] }) {
+  const { fieldIds } = useVisibleTaskFieldIds();
+  const visible = taskCardDisplayFields(fieldIds, fields).filter(
+    (item) => item.value,
+  );
+  if (visible.length === 0) return null;
+
+  return (
+    <div className="mt-1 flex min-w-0 flex-wrap gap-1.5">
+      {visible.map((item) => (
+        <Badge
+          key={item.id}
+          variant="secondary"
+          className="max-w-48 gap-1.5 px-1.5 py-0 text-xs font-normal"
+          title={`${item.title}: ${item.value}`}
+        >
+          <span
+            className={cn("size-1.5 shrink-0 rounded-full", item.colorClass)}
+          />
+          <span className="truncate">
+            {item.title}: {item.value}
+          </span>
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function TaskListRowFieldStrip({ fields }: { fields?: TaskFieldValue[] }) {
+  const { fieldIds } = useVisibleTaskFieldIds();
+  const items = taskCardDisplayFields(fieldIds, fields);
+  const columnCount = Math.min(fieldIds.length, TASK_CARD_FIELD_LIMIT);
+
+  return (
+    <div
+      className="grid items-center gap-2 text-xs"
+      style={{
+        gridTemplateColumns: `repeat(${columnCount}, minmax(6.5rem, 8rem))`,
+      }}
+      aria-label="Visible task fields"
+    >
+      {items.map((item) => (
+        <div
+          key={item.id}
+          className={cn(
+            "flex h-8 min-w-0 items-center gap-1.5 rounded-md border border-transparent px-2 text-muted-foreground",
+            item.value && "bg-muted/45 text-foreground",
+          )}
+          title={item.value ? `${item.title}: ${item.value}` : item.title}
+        >
+          {item.value ? (
+            <span
+              className={cn("size-1.5 shrink-0 rounded-full", item.colorClass)}
+            />
+          ) : null}
+          <span className="truncate">{item.value ?? "—"}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+type TaskCardDisplayField = {
+  id: string;
+  title: string;
+  value: string | null;
+  colorClass: string;
+};
+
+function taskCardDisplayFields(
+  fieldIds: readonly string[],
+  fields?: TaskFieldValue[],
+): TaskCardDisplayField[] {
+  return fieldIds.slice(0, TASK_CARD_FIELD_LIMIT).map((fieldId) => {
+    const field = fields?.find((candidate) => candidate.id === fieldId);
+    return {
+      id: fieldId,
+      title: field?.title ?? fieldId,
+      value: field ? formatTaskFieldDisplayValue(field) : null,
+      colorClass: taskFieldDisplayDotClass(field),
+    };
+  });
+}
+
+function optionById(field: TaskFieldValue, optionId: string) {
+  const options = "options" in field.config ? field.config.options : [];
+  return options.find((option) => option.id === optionId);
+}
+
+function formatTaskFieldDisplayValue(field: TaskFieldValue) {
+  const { value } = field;
+  if (value == null || (Array.isArray(value) && value.length === 0)) {
+    return null;
+  }
+
+  if (field.type === "currency" && typeof value === "number") {
+    return `${field.config.symbol}${value.toFixed(field.config.precision ?? 2)}`;
+  }
+
+  if (field.type === "percent" && typeof value === "number") {
+    return `${value}%`;
+  }
+
+  if (typeof value === "number") {
+    return value.toLocaleString(undefined, {
+      maximumFractionDigits:
+        field.type === "number" ? (field.config.precision ?? 6) : 6,
+    });
+  }
+
+  if (field.type === "single_select" && typeof value === "string") {
+    return optionById(field, value)?.name ?? null;
+  }
+
+  if (field.type === "multi_select" && Array.isArray(value)) {
+    return value
+      .map((optionId) => optionById(field, optionId)?.name)
+      .filter(Boolean)
+      .join(", ");
+  }
+
+  return typeof value === "string" ? value : null;
+}
+
+function taskFieldDisplayDotClass(field?: TaskFieldValue) {
+  if (!field) return "bg-muted-foreground/30";
+  if (field.type === "single_select" && typeof field.value === "string") {
+    return selectColorClass(optionById(field, field.value)?.color);
+  }
+  return "bg-muted-foreground/40";
+}

package/corpus/templates/tasks/app/components/tasks/fields/TaskFieldsSidebar.tsx

@@ -0,0 +1,102 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+
+import { SidePanel } from "@/components/shared/SidePanel";
+import { Label } from "@/components/ui/label";
+import type { FieldValue, TaskFieldValue } from "@/hooks/use-custom-fields";
+import { useUpdateTask, type TaskWithFields } from "@/hooks/use-tasks";
+
+import { FieldValueControl } from "./controls/FieldValueControl";
+import { TaskTitleSection } from "./TaskTitleSection";
+
+export function TaskFieldsSidebar({
+  task,
+  onClose,
+}: {
+  task: TaskWithFields | null;
+  onClose: () => void;
+}) {
+  if (!task) return null;
+
+  return (
+    <SidePanel
+      title="Fields"
+      subtitle="Task details"
+      closeLabel="Close fields panel"
+      onClose={onClose}
+    >
+      <TaskFieldsSidebarPanel task={task} />
+    </SidePanel>
+  );
+}
+
+function TaskFieldsSidebarPanel({ task }: { task: TaskWithFields }) {
+  const fields = task.fields ?? [];
+  const updateTask = useUpdateTask();
+
+  const saveUpdate = useCallback(
+    (payload: {
+      title?: string;
+      fieldValues?: Array<{ fieldId: string; value: FieldValue | null }>;
+    }) => {
+      void updateTask
+        .mutateAsync({ taskId: task.id, ...payload })
+        .catch((caught) => {
+          toast.error((caught as Error)?.message ?? "Could not update task.");
+        });
+    },
+    [task.id, updateTask],
+  );
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <TaskTitleSection
+        title={task.title}
+        onChange={(title) => saveUpdate({ title })}
+      />
+
+      {fields.length === 0 ? (
+        <div className="m-3 rounded-lg border border-dashed border-border p-6 text-center text-[13px] text-muted-foreground">
+          No fields defined.
+        </div>
+      ) : (
+        fields.map((field) => (
+          <TaskFieldEditorSection
+            key={field.id}
+            field={field}
+            value={field.value ?? null}
+            onChange={(value) =>
+              saveUpdate({ fieldValues: [{ fieldId: field.id, value }] })
+            }
+          />
+        ))
+      )}
+    </div>
+  );
+}
+
+function TaskFieldEditorSection({
+  field,
+  value,
+  onChange,
+}: {
+  field: TaskFieldValue;
+  value: FieldValue | null;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  return (
+    <section className="grid gap-2 border-b border-border/70 px-3 py-3 last:border-b-0">
+      <div className="flex min-w-0 items-center justify-between gap-2">
+        <Label className="min-w-0 truncate text-[13px] font-medium">
+          {field.title}
+        </Label>
+      </div>
+      <FieldValueControl
+        field={field}
+        value={value}
+        disabled={false}
+        onChange={onChange}
+      />
+    </section>
+  );
+}

package/corpus/templates/tasks/app/components/tasks/fields/TaskTitleSection.tsx

@@ -0,0 +1,27 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function TaskTitleSection({
+  title,
+  onChange,
+}: {
+  title: string;
+  onChange: (title: string) => void;
+}) {
+  return (
+    <section className="grid gap-2 border-b border-border/70 px-3 py-3">
+      <div className="flex min-w-0 items-center justify-between gap-2">
+        <Label className="min-w-0 truncate text-[13px] font-medium">
+          Title
+        </Label>
+        <span className="shrink-0 text-[11px] text-muted-foreground">Task</span>
+      </div>
+      <Input
+        value={title}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        aria-label="Edit task title"
+        className="h-9 text-[13px]"
+      />
+    </section>
+  );
+}

package/corpus/templates/tasks/app/components/tasks/fields/controls/DateValueControl.tsx

@@ -0,0 +1,21 @@
+import { Input } from "@/components/ui/input";
+import type { FieldValue } from "@/hooks/use-custom-fields";
+
+export function DateValueControl({
+  value,
+  disabled,
+  onChange,
+}: {
+  value: FieldValue | null;
+  disabled: boolean;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  return (
+    <Input
+      type="date"
+      value={typeof value === "string" ? value : ""}
+      disabled={disabled}
+      onChange={(event) => onChange(event.currentTarget.value || null)}
+    />
+  );
+}

package/corpus/templates/tasks/app/components/tasks/fields/controls/FieldValueControl.tsx

@@ -0,0 +1,76 @@
+import type { FieldValue, TaskFieldValue } from "@/hooks/use-custom-fields";
+
+import { DateValueControl } from "./DateValueControl";
+import { MultiSelectValueControl } from "./MultiSelectValueControl";
+import { NumberValueControl } from "./NumberValueControl";
+import { RichTextValueControl } from "./RichTextValueControl";
+import { SingleSelectValueControl } from "./SingleSelectValueControl";
+import { TextValueControl } from "./TextValueControl";
+
+export function FieldValueControl({
+  field,
+  value,
+  disabled,
+  onChange,
+}: {
+  field: TaskFieldValue;
+  value: FieldValue | null;
+  disabled: boolean;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  switch (field.type) {
+    case "text":
+      return (
+        <TextValueControl
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      );
+    case "rich_text":
+      return (
+        <RichTextValueControl
+          value={typeof value === "string" ? value : ""}
+          disabled={disabled}
+          onChange={(next) => onChange(next || null)}
+        />
+      );
+    case "number":
+    case "percent":
+    case "currency":
+      return (
+        <NumberValueControl
+          field={field}
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      );
+    case "date":
+      return (
+        <DateValueControl
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      );
+    case "single_select":
+      return (
+        <SingleSelectValueControl
+          field={field}
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      );
+    case "multi_select":
+      return (
+        <MultiSelectValueControl
+          field={field}
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      );
+  }
+}

package/corpus/templates/tasks/app/components/tasks/fields/controls/MultiSelectValueControl.tsx

@@ -0,0 +1,52 @@
+import { selectColorClass } from "@/components/custom-fields/editor/config/select-colors";
+import { optionsFromConfig } from "@/components/custom-fields/editor/config/utils";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { FieldValue, TaskFieldValue } from "@/hooks/use-custom-fields";
+import { cn } from "@/lib/utils";
+
+export function MultiSelectValueControl({
+  field,
+  value,
+  disabled,
+  onChange,
+}: {
+  field: TaskFieldValue & { type: "multi_select" };
+  value: FieldValue | null;
+  disabled: boolean;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  const options = optionsFromConfig(field.config);
+  const selected = Array.isArray(value) ? value : [];
+
+  return (
+    <div className="grid gap-2">
+      {options.map((option) => {
+        const checked = selected.includes(option.id);
+        return (
+          <label
+            key={option.id}
+            className="flex min-h-9 items-center gap-2 rounded-md border border-border/80 bg-background px-2.5 py-2 text-[13px] transition-colors hover:bg-muted/35"
+          >
+            <Checkbox
+              checked={checked}
+              disabled={disabled}
+              onCheckedChange={(next) => {
+                const nextSelected = next
+                  ? [...selected, option.id]
+                  : selected.filter((optionId) => optionId !== option.id);
+                onChange(nextSelected.length > 0 ? nextSelected : null);
+              }}
+            />
+            <span
+              className={cn(
+                "size-2 rounded-full",
+                selectColorClass(option.color),
+              )}
+            />
+            <span className="min-w-0 flex-1 truncate">{option.name}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/tasks/fields/controls/NumberValueControl.tsx

@@ -0,0 +1,56 @@
+import { Input } from "@/components/ui/input";
+import type { FieldValue, TaskFieldValue } from "@/hooks/use-custom-fields";
+
+function numericPrecision(
+  field: TaskFieldValue & { type: "number" | "percent" | "currency" },
+) {
+  switch (field.type) {
+    case "number":
+    case "percent":
+      return field.config.precision ?? 0;
+    case "currency":
+      return field.config.precision ?? 2;
+  }
+}
+
+export function NumberValueControl({
+  field,
+  value,
+  disabled,
+  onChange,
+}: {
+  field: TaskFieldValue & { type: "number" | "percent" | "currency" };
+  value: FieldValue | null;
+  disabled: boolean;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  const min =
+    field.type === "number" && field.config.positiveOnly ? 0 : undefined;
+  const precision = numericPrecision(field);
+  const step = precision === 0 ? 1 : 1 / 10 ** precision;
+
+  return (
+    <Input
+      type="number"
+      min={min}
+      step={step}
+      value={typeof value === "number" ? String(value) : ""}
+      disabled={disabled}
+      onChange={(event) => {
+        const next = event.currentTarget.value;
+        if (next === "") {
+          onChange(null);
+          return;
+        }
+        let parsed = Number(next);
+        if (precision === 0) {
+          parsed = Math.trunc(parsed);
+        }
+        if (field.type === "number" && field.config.positiveOnly) {
+          parsed = Math.max(0, parsed);
+        }
+        onChange(parsed);
+      }}
+    />
+  );
+}