@oxy.so/bloom 6.4.0 → 7.0.0

package/lib/commonjs/project-board/TicketDetailDialog.js

@@ -0,0 +1,597 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TicketDetailDialog = TicketDetailDialog;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _TokensChartCard = require("../chart-cards/TokensChartCard.js");
+var _context = require("../dialog/context.js");
+var _useIsRtl = require("../hooks/use-is-rtl.js");
+var _messages = require("../locale/messages.js");
+var _index = require("../textarea/index.js");
+var _BoardTooltip = require("./BoardTooltip.js");
+var _constants = require("./constants.js");
+var _context2 = require("./context.js");
+var _messages2 = require("./messages.js");
+var _ProjectBoardControls = require("./ProjectBoardControls.js");
+var _ProjectBoardIcons = require("./ProjectBoardIcons.js");
+var _SourcePrimitives = require("./SourcePrimitives.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const PRIORITY_STYLES = {
+  Low: 'bg-ticket-detail-low-background text-ticket-detail-low-text',
+  Medium: 'bg-status-yellow-background text-status-yellow-text',
+  High: 'bg-status-orange-background text-status-orange-text',
+  Urgent: 'bg-status-rose-background text-status-rose-text'
+};
+const PRIORITY_HOVERS = {
+  Low: 'group-hover/priority:bg-ticket-detail-low-hover',
+  Medium: 'group-hover/priority:bg-ticket-detail-medium-hover',
+  High: 'group-hover/priority:bg-ticket-detail-high-hover',
+  Urgent: 'group-hover/priority:bg-ticket-detail-urgent-hover'
+};
+const TOOL_BUTTON = 'size-6 rounded-lg text-foreground-icon-secondary [&>svg]:size-[18px]';
+function TicketDetailDialog({
+  title: boardTitle,
+  ticket,
+  column,
+  columns,
+  members,
+  projects,
+  currentUserId,
+  onClose,
+  onUpdate,
+  onMove,
+  onCopyTicketLink,
+  onCopyTicketId
+}) {
+  const {
+    messages: m
+  } = (0, _messages.useMessages)(_messages2.PROJECT_BOARD_MESSAGES);
+  const {
+    Button,
+    CloseButton,
+    Dialog,
+    TicketCornerGenieSurface,
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem
+  } = (0, _context2.useProjectBoardPlatform)();
+  const control = (0, _context.useDialogControl)();
+  const rtl = (0, _useIsRtl.useIsRtl)();
+  const [comment, setComment] = (0, _react.useState)('');
+  const [editingDescription, setEditingDescription] = (0, _react.useState)(false);
+  const [draft, setDraft] = (0, _react.useState)(ticket.description ?? '');
+  const [copyMessage, setCopyMessage] = (0, _react.useState)('');
+  const [scrollFade, setScrollFade] = (0, _react.useState)(0);
+  const copyResetTimer = (0, _react.useRef)(null);
+  const sequence = (0, _react.useRef)(0);
+  (0, _react.useEffect)(() => () => {
+    if (copyResetTimer.current) clearTimeout(copyResetTimer.current);
+  }, []);
+  const creator = members[ticket.createdBy ?? ticket.assignees[0] ?? 'maya'];
+  const owner = members[ticket.assignees[0] ?? ''];
+  async function copy(kind) {
+    if (copyResetTimer.current) clearTimeout(copyResetTimer.current);
+    try {
+      if (kind === 'link' && onCopyTicketLink) await onCopyTicketLink(ticket);else if (kind === 'id' && onCopyTicketId) await onCopyTicketId(ticket.code);else if (_reactNative.Platform.OS === 'web' && typeof navigator !== 'undefined' && navigator.clipboard) {
+        const url = new URL(window.location.href);
+        url.hash = `ticket=${encodeURIComponent(ticket.id)}`;
+        await navigator.clipboard.writeText(kind === 'id' ? ticket.code : url.toString());
+      } else throw new Error('Product clipboard callback required.');
+      setCopyMessage(kind === 'id' ? m.idCopied : m.linkCopied);
+    } catch {
+      setCopyMessage(m.copyFailed);
+    }
+    copyResetTimer.current = setTimeout(() => setCopyMessage(''), 1600);
+  }
+  function postComment() {
+    if (!comment.trim()) return;
+    sequence.current++;
+    onUpdate({
+      comments: [...(ticket.comments ?? []), {
+        id: `${ticket.id}-comment-${Date.now()}-${sequence.current}`,
+        author: currentUserId ? members[currentUserId]?.name ?? currentUserId : 'you',
+        body: comment.trim(),
+        time: m.justNow
+      }]
+    });
+    setComment('');
+  }
+  const action = (label, Icon, run) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenuItem, {
+    className: "px-2 py-1.5",
+    onPress: run,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: "size-[18px] shrink-0 text-foreground-icon-secondary"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+      className: "truncate text-body-medium whitespace-nowrap",
+      children: label
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog, {
+    control: control,
+    startOpen: true,
+    onClose: onClose,
+    label: `${ticket.code}: ${m.properties}`,
+    presentation: "custom",
+    exitDuration: 560,
+    placement: "center",
+    width: 609,
+    maxWidth: 609,
+    contentPadding: 0,
+    scrollable: false,
+    morph: false,
+    containerClassName: "fixed inset-0 z-100 flex items-stretch justify-end overflow-hidden p-3 max-sm:p-2",
+    containerStyle: {
+      alignItems: 'flex-end',
+      justifyContent: 'flex-start',
+      padding: 12
+    },
+    panelStyle: {
+      width: '100%',
+      maxWidth: 609,
+      height: '100%',
+      maxHeight: '100%',
+      backgroundColor: 'transparent'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+      className: "h-full w-full max-w-[609px] outline-none",
+      style: {
+        flex: 1,
+        minHeight: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TicketCornerGenieSurface, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+          className: "flex h-full min-h-0 flex-col overflow-hidden rounded-3xl bg-ticket-detail-surface outline-none",
+          style: {
+            flex: 1,
+            minHeight: 0
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+            className: "flex shrink-0 items-center justify-between gap-3 px-6 pt-6 pb-5 max-sm:px-4 max-sm:pt-4",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+              className: "flex min-w-0 flex-wrap items-center gap-1.5",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                className: "flex min-w-0 items-center gap-0.5 text-body-2-medium text-text-secondary",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                  className: "shrink-0 text-body-2-medium text-text-secondary",
+                  children: boardTitle
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiArrowRightSLine, {
+                  className: "size-[15px] shrink-0 rtl:rotate-180"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                  className: "shrink-0 text-body-2-medium text-text-secondary",
+                  children: ticket.code
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiArrowRightSLine, {
+                  className: "size-[15px] shrink-0 rtl:rotate-180"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                  className: "truncate text-body-2-medium text-text-secondary",
+                  children: ticket.area
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                className: "flex items-center gap-1.5",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BoardTooltip.BoardTooltip, {
+                  label: ticket.isFavorite ? m.favoriteRemove : m.favoriteAdd,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+                    appearance: "outline",
+                    tone: "neutral",
+                    size: "xs",
+                    style: {
+                      width: 24,
+                      height: 24,
+                      minHeight: 24,
+                      borderRadius: 8,
+                      paddingLeft: 0,
+                      paddingRight: 0
+                    },
+                    iconOnly: true,
+                    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardIcons.TicketFavoriteIcon, {
+                      selected: ticket.isFavorite,
+                      className: (0, _constants.cx)('size-[17px]', ticket.isFavorite && 'text-ticket-detail-favorite')
+                    }),
+                    className: (0, _constants.cx)(TOOL_BUTTON, '[&>svg]:size-[17px]', ticket.isFavorite && 'text-ticket-detail-favorite [&_path]:fill-current'),
+                    accessibilityLabel: ticket.isFavorite ? m.favoriteRemove : m.favoriteAdd,
+                    pressed: !!ticket.isFavorite,
+                    onPress: () => onUpdate({
+                      isFavorite: !ticket.isFavorite
+                    })
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoardTooltip.BoardTooltip, {
+                  label: copyMessage === m.linkCopied ? m.linkCopied : m.copyLink,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourcePressable, {
+                    accessibilityRole: "button",
+                    accessibilityLabel: m.copyLink,
+                    className: (0, _constants.cx)('flex items-center justify-center', TOOL_BUTTON, 'group'),
+                    dataSet: {
+                      copied: String(copyMessage === m.linkCopied)
+                    },
+                    onPress: () => {
+                      void copy('link');
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                      className: "relative inline-flex shrink-0 items-center justify-center size-[18px]",
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiLinkM, {
+                        className: "absolute size-[18px] scale-100 opacity-100 blur-[0px] transition-all duration-200 ease-out group-data-[copied=true]:scale-75 group-data-[copied=true]:opacity-0 group-data-[copied=true]:blur-[2px] motion-reduce:transition-none",
+                        style: {
+                          opacity: copyMessage === m.linkCopied ? 0 : 1
+                        }
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiCheckLine, {
+                        className: "absolute size-[18px] scale-75 opacity-0 blur-[2px] transition-all duration-200 ease-out group-data-[copied=true]:scale-100 group-data-[copied=true]:opacity-100 group-data-[copied=true]:blur-[0px] motion-reduce:transition-none",
+                        style: {
+                          opacity: copyMessage === m.linkCopied ? 1 : 0
+                        }
+                      })]
+                    })
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenu, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourcePressable, {
+                      accessibilityLabel: m.actions,
+                      className: (0, _constants.cx)('flex items-center justify-center border border-border-button-default bg-background-primary-default shadow-xs hover:bg-background-primary-hover', TOOL_BUTTON),
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiMore2Fill, {
+                        className: "size-[18px]"
+                      })
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenuContent, {
+                    label: m.actions,
+                    className: "z-[120] w-[220px] rounded-[14px] p-1",
+                    style: {
+                      width: 220
+                    },
+                    children: [action(m.editDescription, _SourcePrimitives.RiEditLine, () => {
+                      setDraft(ticket.description ?? '');
+                      setEditingDescription(true);
+                    }), action(copyMessage === m.idCopied ? m.idCopied : m.copyId, _SourcePrimitives.RiFileCopyLine, () => {
+                      void copy('id');
+                    }), action(column.id === 'done' ? m.reopen : m.markDone, column.id === 'done' ? _SourcePrimitives.RiRestartLine : _SourcePrimitives.RiCheckboxCircleLine, () => onMove(column.id === 'done' ? 'todo' : 'done'))]
+                  })]
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+              size: "sm",
+              className: "self-start",
+              accessibilityLabel: m.closeDetails,
+              onPress: () => control.close()
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+              className: "sr-only",
+              accessibilityLiveRegion: "polite",
+              children: copyMessage
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+            className: "relative min-h-0 flex-1",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+              accessibilityLabel: m.properties,
+              style: {
+                flex: 1,
+                minHeight: 0
+              },
+              onScroll: e => setScrollFade(Math.min(1, Math.max(0, e.nativeEvent.contentOffset.y) / 24)),
+              scrollEventThrottle: 16,
+              contentContainerStyle: {
+                flexGrow: 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                className: "flex min-h-full flex-col",
+                style: {
+                  flexGrow: 1
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                  className: "flex flex-col gap-5 px-6 max-sm:px-4",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                    className: "flex flex-col gap-3",
+                    accessibilityLabel: m.description,
+                    children: [creator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                      className: "flex items-center gap-[13px] text-body-medium",
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                        className: "text-body-medium text-text-secondary",
+                        children: m.createdBy
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                        className: "flex items-center gap-1.5 text-text-primary",
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceAvatar, {
+                          source: creator.avatar,
+                          initials: creator.initials,
+                          alt: creator.name,
+                          className: "size-[18px]"
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                          className: "text-body-medium text-text-primary",
+                          children: creator.name
+                        })]
+                      })]
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                      className: "flex flex-col gap-1.5",
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                        accessibilityRole: "header",
+                        className: "text-headline-medium text-text-primary wrap-anywhere",
+                        children: ticket.title
+                      }), editingDescription ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                        className: "flex flex-col gap-3",
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Textarea, {
+                          accessibilityLabel: m.ticketDescription,
+                          value: draft,
+                          onValueChange: setDraft,
+                          rows: 4,
+                          maxLength: 5000,
+                          autoFocus: true
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                          className: "flex justify-end gap-2",
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+                            appearance: "outline",
+                            tone: "neutral",
+                            size: "sm",
+                            onPress: () => setEditingDescription(false),
+                            children: m.cancel
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+                            size: "sm",
+                            disabled: !draft.trim(),
+                            onPress: () => {
+                              onUpdate({
+                                description: draft.trim()
+                              });
+                              setEditingDescription(false);
+                            },
+                            children: m.saveDescription
+                          })]
+                        })]
+                      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                        className: "whitespace-pre-wrap text-body-regular text-text-secondary wrap-anywhere",
+                        children: ticket.description ?? ''
+                      })]
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                    accessibilityLabel: m.properties,
+                    className: "flex items-start gap-5 max-sm:flex-col max-sm:gap-2",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                      className: "w-[70px] shrink-0 pt-0.5 text-body-medium text-text-secondary",
+                      children: m.properties
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                      className: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-3",
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardControls.PropertySelect, {
+                        label: m.status,
+                        value: column.id,
+                        options: columns.map(c => ({
+                          id: c.id,
+                          label: c.title,
+                          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardIcons.TicketStatusIcon, {
+                            status: c.id,
+                            className: "text-foreground-icon-secondary"
+                          })
+                        })),
+                        onChange: onMove,
+                        renderValue: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                          className: "flex items-center gap-1.5",
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardIcons.TicketStatusIcon, {
+                            status: column.id,
+                            className: "text-foreground-icon-secondary"
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                            className: "text-body-medium text-text-primary",
+                            children: column.title
+                          })]
+                        })
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardControls.PropertySelect, {
+                        chip: true,
+                        label: m.priority,
+                        value: ticket.priority,
+                        options: _ProjectBoardControls.PRIORITIES.map(p => ({
+                          id: p,
+                          label: p
+                        })),
+                        onChange: p => onUpdate({
+                          priority: p
+                        }),
+                        renderValue: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceChip, {
+                          className: (0, _constants.cx)('px-[7px] py-0.5 text-body-medium transition-colors duration-150', PRIORITY_HOVERS[ticket.priority], PRIORITY_STYLES[ticket.priority]),
+                          children: ticket.priority
+                        })
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenu, {
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuTrigger, {
+                          asChild: true,
+                          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourcePressable, {
+                            accessibilityLabel: m.editAssignees,
+                            className: "-m-1 flex items-center gap-1.5 rounded-md p-1 text-body-medium text-text-primary hover:bg-background-primary-hover",
+                            children: ticket.assignees.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                                className: "flex items-center -space-x-1.5",
+                                children: ticket.assignees.slice(0, 3).map((id, i) => {
+                                  const p = members[id];
+                                  return p && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceAvatar, {
+                                    source: p.avatar,
+                                    initials: p.initials,
+                                    alt: p.name,
+                                    className: (0, _constants.cx)('size-[18px] ring-2 ring-ticket-detail-surface', i > 0 && '-ms-1.5')
+                                  }, id);
+                                })
+                              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceText, {
+                                className: "text-body-medium text-text-primary",
+                                children: [owner?.name ?? ticket.assignees[0], ticket.assignees.length > 1 ? ` +${ticket.assignees.length - 1}` : '']
+                              })]
+                            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardIcons.TicketAssigneeIcon, {
+                                className: "size-[18px] text-foreground-icon-tertiary"
+                              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                                className: "text-body-medium text-text-tertiary",
+                                children: m.assignee
+                              })]
+                            })
+                          })
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuContent, {
+                          label: m.editAssignees,
+                          className: "z-[120] w-[220px] rounded-[14px] p-1",
+                          style: {
+                            width: 220
+                          },
+                          children: Object.values(members).map(p => /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuCheckboxItem, {
+                            className: "rounded-2lg px-2 py-1.5 hover:bg-background-secondary-hover",
+                            checked: ticket.assignees.includes(p.id),
+                            onCheckedChange: selected => onUpdate({
+                              assignees: selected ? [...ticket.assignees, p.id] : ticket.assignees.filter(id => id !== p.id)
+                            }),
+                            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                              className: "flex items-center gap-2",
+                              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceAvatar, {
+                                className: "size-[18px]",
+                                source: p.avatar,
+                                initials: p.initials
+                              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                                className: "text-body-medium text-text-primary",
+                                children: p.name
+                              })]
+                            })
+                          }, p.id))
+                        })]
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProjectBoardControls.PropertySelect, {
+                        label: m.project,
+                        value: ticket.project,
+                        options: projects.map(p => ({
+                          id: p,
+                          label: p
+                        })),
+                        onChange: project => onUpdate({
+                          project
+                        }),
+                        renderValue: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                          className: "flex items-center gap-1.5",
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiFolder6Line, {
+                            className: "size-[18px] text-foreground-icon-secondary"
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                            className: "text-body-medium text-text-primary",
+                            children: ticket.project
+                          })]
+                        })
+                      })]
+                    })]
+                  }), !!ticket.resources?.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                    className: "flex items-start gap-5 max-sm:flex-col max-sm:gap-2",
+                    accessibilityLabel: m.resources,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                      className: "w-[71px] shrink-0 pt-0.5 text-body-medium text-text-secondary",
+                      children: m.resources
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                      className: "flex flex-wrap gap-2",
+                      children: ticket.resources.map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourcePressable, {
+                        accessibilityRole: "link",
+                        accessibilityLabel: r.label,
+                        href: r.href,
+                        target: "_blank",
+                        rel: "noreferrer",
+                        className: "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring",
+                        onPress: _reactNative.Platform.OS === 'web' ? undefined : () => {
+                          void _reactNative.Linking.openURL(r.href);
+                        },
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceChip, {
+                          className: "bg-ticket-detail-resource-background px-[7px] py-0.5 text-body-medium text-ticket-detail-resource-text",
+                          children: r.label
+                        })
+                      }, r.href))
+                    })]
+                  }), ticket.tokenUsage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TokensChartCard.TokensChartCard, {
+                    title: m.tokens,
+                    ...ticket.tokenUsage,
+                    plotHeight: 190
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                  accessibilityLabel: m.comments,
+                  className: "mt-auto flex flex-col gap-2.5 px-3 pb-3",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                    className: "flex flex-col",
+                    accessibilityLiveRegion: "polite",
+                    children: (ticket.comments ?? []).map((entry, index) => {
+                      const author = Object.values(members).find(p => p.name === entry.author);
+                      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                        className: "relative flex flex-col gap-[3px] rounded-2xl p-3 after:pointer-events-none after:absolute after:top-9 after:-bottom-3 after:start-[23.5px] after:w-px after:bg-border-button-default last:after:hidden",
+                        children: [_reactNative.Platform.OS !== 'web' && index < (ticket.comments?.length ?? 0) - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                          pointerEvents: "none",
+                          className: "absolute top-9 -bottom-3 start-[23.5px] w-px bg-border-button-default"
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                          className: "flex min-w-0 items-center gap-2",
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceAvatar, {
+                            source: author?.avatar,
+                            initials: entry.author === 'you' ? 'ME' : author?.initials,
+                            alt: entry.author === 'you' ? m.you : entry.author,
+                            className: "size-6",
+                            size: 24
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                            className: "flex min-w-0 flex-wrap items-center gap-x-2",
+                            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                              className: "truncate text-body-medium text-text-primary",
+                              children: entry.author === 'you' ? m.you : entry.author
+                            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                              className: "shrink-0 text-body-2-medium text-text-tertiary",
+                              children: entry.time
+                            })]
+                          })]
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceText, {
+                          className: "ps-[29px] whitespace-pre-wrap text-body-medium text-text-secondary wrap-anywhere",
+                          children: entry.body
+                        })]
+                      }, entry.id);
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+                    className: "relative",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Textarea, {
+                      accessibilityLabel: m.addComment,
+                      placeholder: m.enterComment,
+                      value: comment,
+                      onValueChange: setComment,
+                      rows: 1,
+                      maxLength: 2000,
+                      resize: "none",
+                      fieldClassName: "h-[72px] rounded-xl bg-background-secondary-default pt-3 pb-10",
+                      fieldStyle: {
+                        paddingLeft: 12,
+                        paddingRight: 12
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+                      accessibilityLabel: m.postComment,
+                      size: "sm",
+                      disabled: !comment.trim(),
+                      className: "absolute end-2 bottom-2 size-6 rounded-full p-0",
+                      style: {
+                        position: 'absolute',
+                        bottom: 8,
+                        [rtl ? 'left' : 'right']: 8,
+                        width: 24,
+                        height: 24,
+                        minHeight: 24,
+                        borderRadius: 12,
+                        paddingLeft: 0,
+                        paddingRight: 0
+                      },
+                      onPress: postComment,
+                      iconOnly: true,
+                      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.RiArrowUpLine, {
+                        className: "size-[13.333px]"
+                      })
+                    })]
+                  })]
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SourcePrimitives.SourceView, {
+              pointerEvents: "none",
+              className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-6",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                className: "absolute inset-0 backdrop-blur-[1px] [mask-image:linear-gradient(to_bottom,black,transparent)]",
+                style: {
+                  opacity: scrollFade
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                className: "absolute inset-x-0 top-0 h-4 backdrop-blur-[4px] [mask-image:linear-gradient(to_bottom,black,transparent)]",
+                style: {
+                  opacity: scrollFade
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SourcePrimitives.SourceView, {
+                className: "absolute inset-0 bg-linear-to-b from-ticket-detail-surface to-transparent",
+                style: {
+                  opacity: scrollFade
+                }
+              })]
+            })]
+          })]
+        })
+      })
+    })
+  });
+}
+//# sourceMappingURL=TicketDetailDialog.js.map