@lotics/ui 1.20.0 → 1.22.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@lotics/ui",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
     "./mime": "./src/mime.ts",
     "./download": "./src/download.ts",
+    "./comments_thread": "./src/comments_thread.tsx",
     "./file_badge": "./src/file_badge.tsx",
     "./file_thumbnail": "./src/file_thumbnail.tsx",
     "./file_preview": {

package/src/card.tsx

@@ -56,8 +56,6 @@ const styles = StyleSheet.create({
     } as ViewStyle),
   },
   hovered: {
-    outlineColor: colors.zinc["900"],
-    outlineWidth: 2,
-    outlineStyle: "solid",
+    borderColor: colors.zinc["900"],
   },
 });

package/src/combobox.tsx

@@ -155,10 +155,7 @@ const styles = StyleSheet.create({
     cursor: "pointer",
   },
   opened: {
-    outlineColor: colors.black,
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: -2,
+    borderColor: colors.zinc["900"],
   },
   disabled: {
     opacity: 0.5,

package/src/comments_thread.tsx

@@ -0,0 +1,378 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { View } from "react-native";
+import { Text } from "./text";
+import { Spacer } from "./spacer";
+import { Stack } from "./stack";
+import { Avatar } from "./avatar";
+import { Button } from "./button";
+import { IconButton } from "./icon_button";
+import { MenuButton } from "./menu_button";
+import { FileBadge } from "./file_badge";
+import { TextInputField } from "./text_input_field";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+
+/**
+ * Presentational record-comments primitives — the view, edit, and delete of a
+ * comment thread, with every data, identity, file, and string concern injected.
+ * This is the one implementation shared by the product (`frontend`) and
+ * custom-code apps; neither owns a private copy of the per-comment rendering.
+ *
+ * Pure by the package contract: no data fetching, no i18n (strings come in via
+ * `labels`), no domain-type imports, no analytics. The consumer wires those —
+ * the product through its live-query + member directory, an app through
+ * `useComments` + `useMembers` from `@lotics/app-sdk`.
+ */
+
+export interface ThreadMember {
+  id: string;
+  name: string | null;
+  image?: string | null;
+  email?: string | null;
+}
+
+export interface ThreadFile {
+  id: string;
+  filename: string;
+  mime_type: string;
+  url?: string;
+  thumbnail_url?: string;
+}
+
+export interface ThreadComment {
+  id: string;
+  member_id: string;
+  content: string;
+  files?: ThreadFile[] | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CommentListLabels {
+  empty: string;
+  edit: string;
+  delete: string;
+  edited: string;
+  save: string;
+  cancel: string;
+  /** Accessible name for the per-comment actions trigger. */
+  actions: string;
+  /** Shown when a comment's author can't be resolved. */
+  unknownMember: string;
+  editPlaceholder: string;
+}
+
+const DEFAULT_LABELS: CommentListLabels = {
+  empty: "No comments yet.",
+  edit: "Edit",
+  delete: "Delete",
+  edited: "edited",
+  save: "Save",
+  cancel: "Cancel",
+  actions: "Comment actions",
+  unknownMember: "Unknown member",
+  editPlaceholder: "Edit comment…",
+};
+
+/** Render-prop the consumer can supply to drive its own edit UI (e.g. with file editing). */
+export interface CommentEditFormProps {
+  comment: ThreadComment;
+  onSave: (content: string, files?: ThreadFile[] | null) => void;
+  onCancel: () => void;
+  submitting: boolean;
+  labels: CommentListLabels;
+}
+
+export interface CommentListProps {
+  comments: ThreadComment[];
+  /** The viewer's member id — drives the author-only edit/delete affordance. Null hides it. */
+  currentMemberId: string | null;
+  resolveMember: (memberId: string) => ThreadMember | null;
+  /** Called on inline-edit save. Omit to make comments read-only (no edit affordance). */
+  onEdit?: (id: string, content: string, files?: ThreadFile[] | null) => void | Promise<void>;
+  /** Called on delete. Omit to hide the delete affordance. */
+  onDelete?: (id: string) => void | Promise<void>;
+  /** Render a comment's attachments. Defaults to a row of file badges + names. */
+  renderFiles?: (files: ThreadFile[]) => ReactNode;
+  /** Render the inline edit form. Defaults to a text-only editor (preserves existing files). */
+  renderEditForm?: (props: CommentEditFormProps) => ReactNode;
+  /** Format a comment's `created_at`. Defaults to the locale date-time string. */
+  formatTimestamp?: (iso: string) => string;
+  /** Shown when there are no comments. Defaults to the `empty` label. */
+  emptyState?: ReactNode;
+  labels?: Partial<CommentListLabels>;
+}
+
+function defaultFormatTimestamp(iso: string): string {
+  const d = new Date(iso);
+  return isNaN(d.getTime()) ? iso : d.toLocaleString();
+}
+
+function DefaultFiles({ files }: { files: ThreadFile[] }) {
+  return (
+    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+      {files.map((f) => (
+        <View key={f.id} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+          <FileBadge mimeType={f.mime_type} />
+          <Text size="sm" numberOfLines={1}>
+            {f.filename}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function DefaultEditForm(props: CommentEditFormProps) {
+  const { comment, onSave, onCancel, submitting, labels } = props;
+  const [content, setContent] = useState(comment.content);
+  const canSave = content.trim().length > 0 || (comment.files?.length ?? 0) > 0;
+  return (
+    <View>
+      <TextInputField
+        autoFocus
+        value={content}
+        onChangeText={setContent}
+        multiline
+        numberOfLines={3}
+        placeholder={labels.editPlaceholder}
+      />
+      <Spacer size={8} />
+      <View style={{ flexDirection: "row", gap: 8, justifyContent: "flex-end" }}>
+        <Button title={labels.cancel} color="secondary" disabled={submitting} onPress={onCancel} />
+        <Button
+          title={labels.save}
+          color="primary"
+          disabled={!canSave || submitting}
+          loading={submitting}
+          // Preserve the comment's current files — a text edit never drops them.
+          onPress={() => onSave(content.trim(), comment.files)}
+        />
+      </View>
+    </View>
+  );
+}
+
+interface CommentRowProps {
+  comment: ThreadComment;
+  member: ThreadMember | null;
+  isOwn: boolean;
+  onEdit?: CommentListProps["onEdit"];
+  onDelete?: CommentListProps["onDelete"];
+  renderFiles: (files: ThreadFile[]) => ReactNode;
+  renderEditForm: (props: CommentEditFormProps) => ReactNode;
+  formatTimestamp: (iso: string) => string;
+  labels: CommentListLabels;
+}
+
+function CommentRow(props: CommentRowProps) {
+  const { comment, member, isOwn, onEdit, onDelete, renderFiles, renderEditForm } = props;
+  const { formatTimestamp, labels } = props;
+  const [isEditing, setIsEditing] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const displayName = member?.name || member?.email || labels.unknownMember;
+  const imageSrc = member?.image ? { uri: member.image } : undefined;
+  const files = comment.files ?? [];
+  const showActions = isOwn && !isEditing && (onEdit != null || onDelete != null);
+
+  const handleSave = async (content: string, savedFiles?: ThreadFile[] | null) => {
+    if (!onEdit) return;
+    setSubmitting(true);
+    try {
+      await onEdit(comment.id, content, savedFiles);
+      setIsEditing(false);
+    } catch {
+      // The data layer owns rollback + surfacing (the optimistic edit reverts);
+      // keep the form open for retry and don't let the rejection go unhandled.
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!onDelete || submitting) return;
+    setMenuOpen(false);
+    setSubmitting(true);
+    try {
+      await onDelete(comment.id);
+    } catch {
+      // Rollback re-shows the row (the visible feedback); swallow the rejection.
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <View style={{ flexDirection: "row", gap: 8 }}>
+      <View style={{ flex: 1, flexDirection: "row", gap: 8 }}>
+        <View style={{ paddingTop: 4 }}>
+          <Avatar source={imageSrc} name={displayName} />
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text weight="medium">{displayName}</Text>
+          <Text size="sm" color="zinc-500">
+            {formatTimestamp(comment.created_at)}
+            {comment.updated_at !== comment.created_at ? ` · ${labels.edited}` : ""}
+          </Text>
+          <Spacer size={8} />
+          {isEditing ? (
+            renderEditForm({
+              comment,
+              onSave: handleSave,
+              onCancel: () => setIsEditing(false),
+              submitting,
+              labels,
+            })
+          ) : (
+            <View>
+              {comment.content ? <Text>{comment.content}</Text> : null}
+              {files.length > 0 ? (
+                <>
+                  {comment.content ? <Spacer size={8} /> : null}
+                  {renderFiles(files)}
+                </>
+              ) : null}
+            </View>
+          )}
+        </View>
+      </View>
+      {showActions ? (
+        <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+          <PopoverTrigger>
+            <IconButton icon="ellipsis" tooltip={labels.actions} />
+          </PopoverTrigger>
+          <PopoverContent>
+            <Stack>
+              {onEdit ? (
+                <MenuButton
+                  icon="pencil"
+                  title={labels.edit}
+                  onPress={() => {
+                    setMenuOpen(false);
+                    setIsEditing(true);
+                  }}
+                />
+              ) : null}
+              {onDelete ? (
+                <MenuButton
+                  icon="trash"
+                  title={labels.delete}
+                  danger
+                  disabled={submitting}
+                  onPress={handleDelete}
+                />
+              ) : null}
+            </Stack>
+          </PopoverContent>
+        </Popover>
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * The comment list — one author/avatar/timestamp/content/files row per comment,
+ * oldest first, with an author-only edit/delete menu. Pair it with a composer
+ * (`CommentComposer`, or a richer consumer-owned one) for the full thread.
+ */
+export function CommentList(props: CommentListProps) {
+  const labels = { ...DEFAULT_LABELS, ...props.labels };
+  const renderFiles = props.renderFiles ?? ((files: ThreadFile[]) => <DefaultFiles files={files} />);
+  const renderEditForm = props.renderEditForm ?? ((p: CommentEditFormProps) => <DefaultEditForm {...p} />);
+  const formatTimestamp = props.formatTimestamp ?? defaultFormatTimestamp;
+
+  const sorted = useMemo(
+    () =>
+      [...props.comments].sort(
+        (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
+      ),
+    [props.comments],
+  );
+
+  if (sorted.length === 0) {
+    return <>{props.emptyState ?? <Text color="zinc-500">{labels.empty}</Text>}</>;
+  }
+
+  return (
+    <View>
+      {sorted.map((comment, i) => (
+        <View key={comment.id}>
+          {i > 0 ? <Spacer size={16} /> : null}
+          <CommentRow
+            comment={comment}
+            member={props.resolveMember(comment.member_id)}
+            isOwn={props.currentMemberId != null && props.currentMemberId === comment.member_id}
+            onEdit={props.onEdit}
+            onDelete={props.onDelete}
+            renderFiles={renderFiles}
+            renderEditForm={renderEditForm}
+            formatTimestamp={formatTimestamp}
+            labels={labels}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export interface CommentComposerProps {
+  /** Submit a new comment. Cleared on success; left intact on throw so the draft survives. */
+  onSubmit: (content: string) => void | Promise<void>;
+  placeholder: string;
+  sendLabel: string;
+  /** Disable input + send (e.g. comments unavailable for an anonymous viewer). */
+  disabled?: boolean;
+  /** Extra controls left of the send button — e.g. an attach-file button. */
+  actions?: ReactNode;
+}
+
+/**
+ * A minimal text comment composer for consumers without a richer one of their
+ * own (the product uses its file-capable chat composer instead). Multiline
+ * input + a send button; attachments are opt-in via the `actions` slot.
+ */
+export function CommentComposer(props: CommentComposerProps) {
+  const { onSubmit, placeholder, sendLabel, disabled, actions } = props;
+  const [content, setContent] = useState("");
+  const [sending, setSending] = useState(false);
+
+  const send = async () => {
+    const text = content.trim();
+    if (!text || sending || disabled) return;
+    setSending(true);
+    try {
+      await onSubmit(text);
+      setContent("");
+    } catch {
+      // Keep the draft so the user can retry; the data layer surfaces the
+      // failure (the optimistic comment rolls back). Don't propagate.
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <View>
+      <TextInputField
+        value={content}
+        onChangeText={setContent}
+        placeholder={placeholder}
+        editable={!disabled}
+        multiline
+        numberOfLines={2}
+      />
+      <Spacer size={8} />
+      <View style={{ flexDirection: "row", gap: 8, justifyContent: "flex-end", alignItems: "center" }}>
+        {actions}
+        <Button
+          title={sendLabel}
+          color="primary"
+          disabled={disabled || !content.trim() || sending}
+          loading={sending}
+          onPress={send}
+        />
+      </View>
+    </View>
+  );
+}

package/src/date_field.tsx

@@ -150,10 +150,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.background,
   },
   frameFocused: {
-    outlineColor: colors.black,
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: -2,
+    borderColor: colors.zinc["900"],
   },
   frameDisabled: {
     backgroundColor: colors.zinc["50"],

package/src/index.css

@@ -341,7 +341,6 @@ html {
 :focus-visible {
   outline: 2px solid var(--color-zinc-900);
   outline-offset: 2px;
-  border-radius: 4px;
 }
 :focus:not(:focus-visible) {
   outline: none;

package/src/picker.tsx

@@ -331,10 +331,7 @@ const styles = StyleSheet.create({
     height: 40,
   },
   opened: {
-    outlineColor: colors.black,
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: -2,
+    borderColor: colors.zinc["900"],
   },
   disabled: {
     opacity: 0.5,

package/src/select_item.tsx

@@ -50,8 +50,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
   },
   hovered: {
-    outlineColor: colors.zinc["900"],
-    outlineWidth: 2,
-    outlineStyle: "solid",
+    borderColor: colors.zinc["900"],
   },
 });

package/src/time_field.tsx

@@ -273,10 +273,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.background,
   },
   triggerOpen: {
-    outlineColor: colors.black,
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: -2,
+    borderColor: colors.zinc["900"],
   },
   triggerDisabled: {
     backgroundColor: colors.zinc["50"],