@ynput/ayon-frontend-shared 0.2.32 → 0.2.34

package/dist/shared/src/containers/Feed/components/ActivityComment/ActivityComment.es.js

@@ -1,31 +1,31 @@
 import { j as t } from "../../../../../../_virtual/jsx-runtime.es.js";
-import A from "clsx";
-import { useMemo as K, useCallback as X } from "react";
-import Y from "react-markdown";
-import Z from "remark-emoji";
-import $ from "remark-gfm";
-import U from "remark-directive";
-import ee from "remark-directive-rehype";
-import te from "../CommentInput/CommentInput.es.js";
-import oe from "../ReactionContainer/Reactions.es.js";
-import ie from "../../hooks/useReferenceTooltip.es.js";
-import re from "../FilesGrid/FilesGrid.es.js";
-import { getTextRefs as ne } from "../CommentInput/quillToMarkdown.es.js";
-import { Comment as me, Body as se, Tools as ae, ToolButton as b, Tip as ce } from "./ActivityComment.styled.es.js";
-import le from "./CommentWrapper.es.js";
-import { blockquoteTag as pe, codeTag as de, inputTag as fe, aTag as ue } from "./ActivityMarkdownComponents.es.js";
-import { mapGraphQLReactions as xe } from "./mappers.es.js";
-import { Icon as he } from "@ynput/ayon-react-components";
-import ge from "../ActivityStatus/ActivityStatus.es.js";
-import { useFeedContext as w } from "../../context/FeedContext.es.js";
-import { confirmDelete as je } from "../../../../util/confirmDelete.es.js";
+import F from "clsx";
+import { useMemo as N, useCallback as ee } from "react";
+import oe from "react-markdown";
+import te from "remark-emoji";
+import re from "remark-gfm";
+import ie from "remark-directive";
+import ne from "remark-directive-rehype";
+import me from "../CommentInput/CommentInput.es.js";
+import se from "../ReactionContainer/Reactions.es.js";
+import ae from "../../hooks/useReferenceTooltip.es.js";
+import ce from "../FilesGrid/FilesGrid.es.js";
+import { getTextRefs as le } from "../CommentInput/quillToMarkdown.es.js";
+import { Comment as de, Body as pe, Tools as fe, ToolButton as P, Tip as ue } from "./ActivityComment.styled.es.js";
+import ye from "./CommentWrapper.es.js";
+import { blockquoteTag as ge, codeTag as xe, inputTag as he, aTag as Ce } from "./ActivityMarkdownComponents.es.js";
+import { mapGraphQLReactions as je } from "./mappers.es.js";
+import { Icon as Te } from "@ynput/ayon-react-components";
+import Re from "../ActivityStatus/ActivityStatus.es.js";
+import { useFeedContext as ve } from "../../context/FeedContext.es.js";
+import { confirmDelete as ke } from "../../../../util/confirmDelete.es.js";
 import "react-toastify";
 import "uuid";
 import "lodash";
 import "../../../../util/pubsub.es.js";
-import ye from "../ActivityHeader/ActivityHeader.es.js";
+import be from "../ActivityHeader/ActivityHeader.es.js";
 import "../../../../context/RemoteModulesContext.es.js";
-import { useDetailsPanelContext as Ce } from "../../../../context/DetailsPanelContext.es.js";
+import { useDetailsPanelContext as Ae } from "../../../../context/DetailsPanelContext.es.js";
 import "../../../../context/ThumbnailUploaderContext.es.js";
 import "../../../../context/SettingsPanelContext.es.js";
 import "../../../../context/pip/PiPProvider.es.js";
@@ -36,182 +36,216 @@ import "../../../../context/AddonContext.es.js";
 import "../../../../context/PowerpackContext.es.js";
 import "../../../../context/MoveEntityContext.es.js";
 import "../../../../context/MenuContext.es.js";
-const mt = ({
+import { useBlendedCategoryColor as we } from "../CommentInput/hooks/useBlendedCategoryColor.es.js";
+import { CategoryTag as Ee } from "../ActivityCategorySelect/CategoryTag.es.js";
+const xo = ({
   activity: r = {},
-  onCheckChange: E,
-  onDelete: c,
-  onUpdate: l,
-  projectInfo: Re,
-  editProps: I,
-  projectName: n,
-  entityType: D,
-  onReferenceClick: j,
-  onFileExpand: F,
-  showOrigin: H,
-  isHighlighted: N,
-  readOnly: y,
-  statuses: q = []
+  onCheckChange: H,
+  onDelete: p,
+  onUpdate: f,
+  projectInfo: Ie,
+  editProps: q,
+  projectName: m,
+  entityType: B,
+  onReferenceClick: T,
+  onFileExpand: G,
+  showOrigin: M,
+  isHighlighted: $,
+  readOnly: R,
+  statuses: L = []
 }) => {
-  const { userName: p, createReaction: M, deleteReaction: S } = w();
+  var S;
+  const { userName: u, createReaction: O, deleteReaction: Q, editingId: V, setEditingId: y, categories: v, isGuest: g } = ve(), o = N(() => v.find((e) => {
+    var d;
+    return e.name === ((d = r.activityData) == null ? void 0 : d.category);
+  }) || null, [(S = r == null ? void 0 : r.activityData) == null ? void 0 : S.category, v]), s = we(o == null ? void 0 : o.color);
   let {
-    body: d,
-    authorName: m,
-    authorFullName: f,
-    createdAt: B,
-    referenceType: G,
-    entityId: C,
-    activityId: o,
-    author: i,
-    isOwner: u,
-    files: x = [],
-    origin: h
+    body: x,
+    authorName: c,
+    authorFullName: h,
+    createdAt: W,
+    referenceType: _,
+    entityId: k,
+    activityId: i,
+    author: n,
+    isOwner: b,
+    files: C = [],
+    origin: j
   } = r;
-  m || (m = (i == null ? void 0 : i.name) || ""), f || (f = (i == null ? void 0 : i.fullName) || m);
-  const { editingId: P, setEditingId: g } = w(), { onGoToFrame: s, setHighlightedActivities: L } = Ce(), R = () => {
-    g(o);
-  }, O = () => {
-    g(null);
-  }, Q = async (e, J) => {
-    await (l == null ? void 0 : l(e, J)), g(null);
-  }, a = P === o, T = G !== "origin" || H, V = async () => {
-    const e = ne(d);
-    T && h && e.push({ id: h.id, type: h.type }), c && await c(o, C, e);
-  }, W = () => {
-    je({
+  c || (c = (n == null ? void 0 : n.name) || ""), h || (h = (n == null ? void 0 : n.fullName) || c);
+  const { onGoToFrame: l, setHighlightedActivities: z } = Ae(), A = () => {
+    y(i);
+  }, J = () => {
+    y(null);
+  }, K = async (e, d, U) => {
+    await (f == null ? void 0 : f(e, d, void 0, U)), y(null);
+  }, a = V === i, w = _ !== "origin" || M, X = async () => {
+    const e = le(x);
+    w && j && e.push({ id: j.id, type: j.type }), p && await p(i, k, e);
+  }, Y = () => {
+    ke({
       title: "Delete comment",
       message: "Are you sure you want to delete this comment?",
       accept: async () => {
-        await V();
+        await X();
       }
     });
-  }, [, k] = ie(), v = K(
-    () => xe(r.reactions, p),
+  }, [, E] = ae(), I = N(
+    () => je(r.reactions, u),
     [[...r.reactions || []]]
-  ), _ = (e) => {
-    e.isActive ? M({
-      projectName: n,
+  ), Z = (e) => {
+    e.isActive ? O({
+      projectName: m,
       // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update
-      userName: p,
-      activityId: o,
+      userName: u,
+      activityId: i,
       createReactionModel: {
         reaction: e.type
       }
-    }) : S({
-      projectName: n,
+    }) : Q({
+      projectName: m,
       // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update
-      userName: p,
-      activityId: o,
+      userName: u,
+      activityId: i,
       reaction: e.type
     });
-  }, z = X(
+  }, D = ee(
     (e) => {
-      e.annotation && (s == null || s(e.annotation.range[0]), L([o]));
+      e.annotation && (l == null || l(e.annotation.range[0]), z([i]));
     },
-    [s]
+    [l]
   );
   return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs(
-    me,
+    de,
     {
-      className: A("comment", { isOwner: u, isEditing: a, isHighlighted: N }),
-      id: o,
+      className: F("comment", {
+        isOwner: b,
+        isEditing: a,
+        isHighlighted: $,
+        category: !!o && !g
+      }),
+      id: i,
+      $categoryPrimary: o == null ? void 0 : o.color,
+      $categoryTertiary: s.primary,
+      $categorySecondary: s.secondary,
       children: [
         /* @__PURE__ */ t.jsx(
-          ye,
+          be,
           {
-            name: m,
-            fullName: f,
-            date: B,
-            isRef: T,
+            name: c,
+            fullName: h,
+            date: W,
+            isRef: w,
             activity: r,
-            projectName: n,
-            entityType: D,
-            onReferenceClick: j,
-            onReferenceTooltip: k,
+            projectName: m,
+            entityType: B,
+            onReferenceClick: T,
+            onReferenceTooltip: E,
             children: void 0
           }
         ),
-        /* @__PURE__ */ t.jsxs(se, { className: A("comment-body", { isEditing: a }), children: [
-          !y && /* @__PURE__ */ t.jsxs(ae, { className: "tools", children: [
-            u && c && /* @__PURE__ */ t.jsx(
-              b,
+        /* @__PURE__ */ t.jsxs(pe, { className: F("comment-body", { isEditing: a }), children: [
+          !R && b ? /* @__PURE__ */ t.jsxs(fe, { className: "tools", children: [
+            p && /* @__PURE__ */ t.jsx(
+              P,
               {
                 icon: "delete",
-                onClick: W,
-                tooltip: "Delete comment"
+                onClick: Y,
+                tooltip: "Delete comment",
+                variant: "text"
               }
             ),
-            u && R && /* @__PURE__ */ t.jsx(b, { icon: "edit_square", onClick: R })
-          ] }),
+            A && /* @__PURE__ */ t.jsx(P, { icon: "edit_square", onClick: A, variant: "text" })
+          ] }) : /* @__PURE__ */ t.jsx("div", { className: "tools" }),
+          !a && !g && o && /* @__PURE__ */ t.jsx(
+            Ee,
+            {
+              value: o.name,
+              color: o.color,
+              style: {
+                top: -4,
+                left: -4
+              },
+              isCompact: !0
+            }
+          ),
           a ? /* @__PURE__ */ t.jsx(
-            te,
+            me,
             {
-              initValue: d,
-              initFiles: x,
+              initValue: x,
+              initFiles: C,
+              initCategory: o == null ? void 0 : o.name,
               isEditing: !0,
-              onClose: O,
-              onSubmit: Q,
+              onClose: J,
+              onSubmit: K,
               isOpen: !0,
-              ...I
+              ...q
             }
           ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(
-              Y,
+            /* @__PURE__ */ t.jsx(ye, { children: /* @__PURE__ */ t.jsx(
+              oe,
               {
-                remarkPlugins: [$, Z, U, ee],
+                remarkPlugins: [re, te, ie, ne],
                 urlTransform: (e) => e,
                 components: {
                   // a links
                   // @ts-ignore
                   a: (e) => (
                     // @ts-ignore
-                    ue(e, {
-                      entityId: C,
-                      projectName: n,
-                      onReferenceClick: j,
-                      onReferenceTooltip: k,
-                      activityId: o
+                    Ce(e, {
+                      entityId: k,
+                      projectName: m,
+                      onReferenceClick: T,
+                      onReferenceTooltip: E,
+                      activityId: i,
+                      categoryPrimary: o == null ? void 0 : o.color,
+                      categorySecondary: s.secondary
                     })
                   ),
                   // checkbox inputs
                   // @ts-ignore
-                  input: (e) => fe(e, { activity: r, onCheckChange: E }),
+                  input: (e) => he(e, { activity: r, onCheckChange: H }),
                   // code syntax highlighting
                   // eslint-disable-next-line
                   // @ts-ignore
-                  code: (e) => de(e),
+                  code: (e) => xe(e),
                   // @ts-ignore
-                  blockquote: (e) => pe(e),
+                  blockquote: (e) => ge(e),
                   // @ts-ignore
-                  tip: (e) => /* @__PURE__ */ t.jsxs(ce, { children: [
-                    /* @__PURE__ */ t.jsx(he, { icon: "info" }),
+                  tip: (e) => /* @__PURE__ */ t.jsxs(ue, { children: [
+                    /* @__PURE__ */ t.jsx(Te, { icon: "info" }),
                     e.children
                   ] }),
                   // @ts-ignore
-                  status: (e) => /* @__PURE__ */ t.jsx(ge, { name: e.id, statuses: q, children: e.children })
+                  status: (e) => /* @__PURE__ */ t.jsx(Re, { name: e.id, statuses: L, children: e.children })
                 },
-                children: d
+                children: x
               }
             ) }),
             /* @__PURE__ */ t.jsx(
-              re,
+              ce,
               {
-                files: x,
-                isCompact: x.length > 6,
-                activityId: o,
-                projectName: n,
+                files: C,
+                isCompact: C.length > 6,
+                activityId: i,
+                projectName: m,
                 isDownloadable: !0,
-                onExpand: F,
-                onAnnotationClick: z,
+                onExpand: G,
+                onAnnotationClick: D,
                 onRemove: void 0
               }
             )
           ] }),
-          !a && /* @__PURE__ */ t.jsx("div", { style: { marginTop: "16px" }, children: v && /* @__PURE__ */ t.jsx(
-            oe,
+          !a && /* @__PURE__ */ t.jsx("div", { style: { marginTop: "16px" }, children: I && /* @__PURE__ */ t.jsx(
+            se,
             {
-              reactions: v,
-              changeHandler: _,
-              readOnly: y
+              reactions: I,
+              changeHandler: Z,
+              readOnly: R,
+              category: o && !g ? o.name : void 0,
+              categoryPrimary: o == null ? void 0 : o.color,
+              categorySecondary: s.secondary,
+              categoryTertiary: s.primary
             }
           ) })
         ] })
@@ -220,6 +254,6 @@ const mt = ({
   ) });
 };
 export {
-  mt as default
+  xo as default
 };
 //# sourceMappingURL=ActivityComment.es.js.map

package/dist/shared/src/containers/Feed/components/ActivityComment/ActivityComment.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityComment.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityComment/ActivityComment.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useCallback, useMemo } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport emoji from 'remark-emoji'\nimport remarkGfm from 'remark-gfm'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\n\nimport CommentInput from '../CommentInput/CommentInput'\nimport Reactions from '../ReactionContainer/Reactions'\nimport { Reaction } from '../ReactionContainer/types'\nimport useReferenceTooltip from '../../hooks/useReferenceTooltip'\nimport FilesGrid, { FilesGridProps } from '../FilesGrid/FilesGrid'\n\nimport { getTextRefs } from '../CommentInput/quillToMarkdown'\nimport * as Styled from './ActivityComment.styled'\nimport CommentWrapper from './CommentWrapper'\nimport { aTag, blockquoteTag, codeTag, inputTag } from './ActivityMarkdownComponents'\nimport { mapGraphQLReactions } from './mappers'\nimport { Icon } from '@ynput/ayon-react-components'\nimport ActivityStatus from '../ActivityStatus/ActivityStatus'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { confirmDelete } from '../../../../util'\nimport ActivityHeader, { ActivityHeaderProps } from '../ActivityHeader/ActivityHeader'\nimport type { Status } from '../../../ProjectTreeTable/types/project'\nimport { SavedAnnotationMetadata } from '../../index'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  activity: any\n  onCheckChange?: Function\n  onDelete?: (activityId: string, entityId: string, refs: any) => Promise<void>\n  onUpdate?: Function\n  projectInfo: any\n  editProps?: {\n    disabled: boolean\n    isLoading: boolean\n  }\n  projectName: string\n  entityType: string\n  onReferenceClick?: ActivityHeaderProps['onReferenceClick']\n  onFileExpand?: FilesGridProps['onExpand']\n  showOrigin?: boolean\n  isHighlighted?: boolean\n  readOnly?: boolean\n  statuses: Status[]\n}\n\nconst ActivityComment = ({\n  activity = {},\n  onCheckChange,\n  onDelete,\n  onUpdate,\n  projectInfo,\n  editProps,\n  projectName,\n  entityType,\n  onReferenceClick,\n  onFileExpand,\n  showOrigin,\n  isHighlighted,\n  readOnly,\n  statuses = [],\n}: Props) => {\n  const { userName, createReaction, deleteReaction } = useFeedContext()\n\n  let {\n    body,\n    authorName,\n    authorFullName,\n    createdAt,\n    referenceType,\n    entityId,\n    activityId,\n    author,\n    isOwner,\n    files = [],\n    origin,\n  } = activity\n  if (!authorName) authorName = author?.name || ''\n  if (!authorFullName) authorFullName = author?.fullName || authorName\n\n  const { editingId, setEditingId } = useFeedContext()\n  const { onGoToFrame, setHighlightedActivities } = useDetailsPanelContext()\n\n  const handleEditComment = () => {\n    setEditingId(activityId)\n  }\n\n  const handleEditCancel = () => {\n    // close the edit comment\n    setEditingId(null)\n  }\n\n  const handleSave = async (value: any, files: any) => {\n    await onUpdate?.(value, files)\n    setEditingId(null)\n  }\n\n  const isEditing = editingId === activityId\n\n  const isRef = referenceType !== 'origin' || showOrigin\n\n  const handleDelete = async () => {\n    const refs = getTextRefs(body)\n\n    // if the comment is a reference, (it's origin is not the entity)\n    // we need to delete the reference from the origin as well\n    // add it to the refs to delete\n    if (isRef && origin) {\n      refs.push({ id: origin.id, type: origin.type })\n    }\n\n    // note: body is used to match other refs to delete\n    onDelete && (await onDelete(activityId, entityId, refs))\n  }\n\n  const deleteConfirmation = () => {\n    confirmDelete({\n      title: 'Delete comment',\n      message: 'Are you sure you want to delete this comment?',\n      accept: async () => {\n        await handleDelete()\n      },\n    })\n  }\n\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  const mappedReactions = useMemo(\n    () => mapGraphQLReactions(activity.reactions, userName),\n    [[...(activity.reactions || [])]],\n  )\n\n  const reactionChangeHandler = (reaction: Reaction) => {\n    if (reaction.isActive) {\n      createReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        createReactionModel: {\n          reaction: reaction.type,\n        },\n      })\n    } else {\n      deleteReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        reaction: reaction.type,\n      })\n    }\n  }\n\n  const onAnnotationClick = useCallback(\n    (file: any) => {\n      if (!file.annotation) return\n      // annotation frame numbers are 1-based\n      onGoToFrame?.((file.annotation as SavedAnnotationMetadata).range[0])\n      setHighlightedActivities([activityId])\n    },\n    [onGoToFrame],\n  )\n\n  return (\n    <>\n      <Styled.Comment\n        className={clsx('comment', { isOwner, isEditing, isHighlighted })}\n        id={activityId}\n      >\n        <ActivityHeader\n          name={authorName}\n          fullName={authorFullName}\n          date={createdAt}\n          isRef={isRef}\n          activity={activity}\n          // projectInfo={projectInfo}\n          projectName={projectName}\n          entityType={entityType}\n          onReferenceClick={onReferenceClick}\n          onReferenceTooltip={setRefTooltip}\n          children={undefined}\n        />\n        <Styled.Body className={clsx('comment-body', { isEditing })}>\n          {!readOnly && (\n            <Styled.Tools className={'tools'}>\n              {isOwner && onDelete && (\n                <Styled.ToolButton\n                  icon=\"delete\"\n                  onClick={deleteConfirmation}\n                  tooltip=\"Delete comment\"\n                />\n              )}\n              {isOwner && handleEditComment && (\n                <Styled.ToolButton icon=\"edit_square\" onClick={handleEditComment} />\n              )}\n            </Styled.Tools>\n          )}\n          {isEditing ? (\n            <CommentInput\n              initValue={body}\n              initFiles={files}\n              isEditing\n              onClose={handleEditCancel}\n              onSubmit={handleSave}\n              isOpen={true}\n              {...editProps}\n            />\n          ) : (\n            <>\n              <CommentWrapper>\n                <ReactMarkdown\n                  remarkPlugins={[remarkGfm, emoji, remarkDirective, remarkDirectiveRehype]}\n                  urlTransform={(url) => url}\n                  components={{\n                    // a links\n                    // @ts-ignore\n                    a: (props) =>\n                      // @ts-ignore\n                      aTag(props, {\n                        entityId,\n                        projectName,\n                        projectInfo,\n                        onReferenceClick,\n                        onReferenceTooltip: setRefTooltip,\n                        activityId,\n                      }),\n                    // checkbox inputs\n                    // @ts-ignore\n                    input: (props) => inputTag(props, { activity, onCheckChange }),\n                    // code syntax highlighting\n                    // eslint-disable-next-line\n                    // @ts-ignore\n                    code: (props) => codeTag(props),\n                    // @ts-ignore\n                    blockquote: (props) => blockquoteTag(props),\n                    // @ts-ignore\n                    tip: (props) => (\n                      <Styled.Tip>\n                        <Icon icon=\"info\" />\n                        {props.children}\n                      </Styled.Tip>\n                    ),\n                    // @ts-ignore\n                    status: (props) => {\n                      return (\n                        <ActivityStatus name={props.id} statuses={statuses}>\n                          {props.children}\n                        </ActivityStatus>\n                      )\n                    },\n                  }}\n                >\n                  {body}\n                </ReactMarkdown>\n              </CommentWrapper>\n              {/* file uploads */}\n              {/* @ts-ignore */}\n              <FilesGrid\n                files={files}\n                isCompact={files.length > 6}\n                activityId={activityId}\n                projectName={projectName}\n                isDownloadable\n                onExpand={onFileExpand}\n                onAnnotationClick={onAnnotationClick}\n                onRemove={undefined}\n              />\n            </>\n          )}\n\n          {!isEditing && (\n            <div style={{ marginTop: '16px' }}>\n              {mappedReactions && (\n                <Reactions\n                  reactions={mappedReactions}\n                  changeHandler={reactionChangeHandler}\n                  readOnly={readOnly}\n                />\n              )}\n            </div>\n          )}\n        </Styled.Body>\n      </Styled.Comment>\n    </>\n  )\n}\n\nexport default ActivityComment\n"],"names":["ActivityComment","activity","onCheckChange","onDelete","onUpdate","projectInfo","editProps","projectName","entityType","onReferenceClick","onFileExpand","showOrigin","isHighlighted","readOnly","statuses","userName","createReaction","deleteReaction","useFeedContext","body","authorName","authorFullName","createdAt","referenceType","entityId","activityId","author","isOwner","files","origin","editingId","setEditingId","onGoToFrame","setHighlightedActivities","useDetailsPanelContext","handleEditComment","handleEditCancel","handleSave","value","isEditing","isRef","handleDelete","refs","getTextRefs","deleteConfirmation","confirmDelete","setRefTooltip","useReferenceTooltip","mappedReactions","useMemo","mapGraphQLReactions","reactionChangeHandler","reaction","onAnnotationClick","useCallback","file","jsx","Fragment","jsxs","Styled.Comment","clsx","ActivityHeader","Styled.Body","Styled.Tools","Styled.ToolButton","CommentInput","CommentWrapper","ReactMarkdown","remarkGfm","emoji","remarkDirective","remarkDirectiveRehype","url","props","aTag","inputTag","codeTag","blockquoteTag","Styled.Tip","Icon","ActivityStatus","FilesGrid","Reactions"],"mappings":"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"}
+{"version":3,"file":"ActivityComment.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityComment/ActivityComment.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useCallback, useMemo } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport emoji from 'remark-emoji'\nimport remarkGfm from 'remark-gfm'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\n\nimport CommentInput from '../CommentInput/CommentInput'\nimport Reactions from '../ReactionContainer/Reactions'\nimport { Reaction } from '../ReactionContainer/types'\nimport useReferenceTooltip from '../../hooks/useReferenceTooltip'\nimport FilesGrid, { FilesGridProps } from '../FilesGrid/FilesGrid'\n\nimport { getTextRefs } from '../CommentInput/quillToMarkdown'\nimport * as Styled from './ActivityComment.styled'\nimport CommentWrapper from './CommentWrapper'\nimport { aTag, blockquoteTag, codeTag, inputTag } from './ActivityMarkdownComponents'\nimport { mapGraphQLReactions } from './mappers'\nimport { Icon } from '@ynput/ayon-react-components'\nimport ActivityStatus from '../ActivityStatus/ActivityStatus'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { confirmDelete } from '../../../../util'\nimport ActivityHeader, { ActivityHeaderProps } from '../ActivityHeader/ActivityHeader'\nimport type { Status } from '../../../ProjectTreeTable/types/project'\nimport { SavedAnnotationMetadata } from '../../index'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { useBlendedCategoryColor } from '../CommentInput/hooks/useBlendedCategoryColor'\nimport { CategoryTag } from '../ActivityCategorySelect/CategoryTag'\n\ntype Props = {\n  activity: any\n  onCheckChange?: Function\n  onDelete?: (activityId: string, entityId: string, refs: any) => Promise<void>\n  onUpdate?: (value: any, files: any, refs?: any, data?: any) => Promise<void>\n  projectInfo: any\n  editProps?: {\n    disabled: boolean\n    isLoading: boolean\n  }\n  projectName: string\n  entityType: string\n  onReferenceClick?: ActivityHeaderProps['onReferenceClick']\n  onFileExpand?: FilesGridProps['onExpand']\n  showOrigin?: boolean\n  isHighlighted?: boolean\n  readOnly?: boolean\n  statuses: Status[]\n}\n\nconst ActivityComment = ({\n  activity = {},\n  onCheckChange,\n  onDelete,\n  onUpdate,\n  projectInfo,\n  editProps,\n  projectName,\n  entityType,\n  onReferenceClick,\n  onFileExpand,\n  showOrigin,\n  isHighlighted,\n  readOnly,\n  statuses = [],\n}: Props) => {\n  const { userName, createReaction, deleteReaction, editingId, setEditingId, categories, isGuest } =\n    useFeedContext()\n\n  const categoryData = useMemo(() => {\n    return categories.find((cat) => cat.name === activity.activityData?.category) || null\n  }, [activity?.activityData?.category, categories])\n  // Compute blended background color for category\n  const blendedCategoryColor = useBlendedCategoryColor(categoryData?.color)\n\n  let {\n    body,\n    authorName,\n    authorFullName,\n    createdAt,\n    referenceType,\n    entityId,\n    activityId,\n    author,\n    isOwner,\n    files = [],\n    origin,\n  } = activity\n  if (!authorName) authorName = author?.name || ''\n  if (!authorFullName) authorFullName = author?.fullName || authorName\n\n  const { onGoToFrame, setHighlightedActivities } = useDetailsPanelContext()\n\n  const handleEditComment = () => {\n    setEditingId(activityId)\n  }\n\n  const handleEditCancel = () => {\n    // close the edit comment\n    setEditingId(null)\n  }\n\n  const handleSave = async (value: any, files: any, data?: any) => {\n    await onUpdate?.(value, files, undefined, data)\n    setEditingId(null)\n  }\n\n  const isEditing = editingId === activityId\n\n  const isRef = referenceType !== 'origin' || showOrigin\n\n  const handleDelete = async () => {\n    const refs = getTextRefs(body)\n\n    // if the comment is a reference, (it's origin is not the entity)\n    // we need to delete the reference from the origin as well\n    // add it to the refs to delete\n    if (isRef && origin) {\n      refs.push({ id: origin.id, type: origin.type })\n    }\n\n    // note: body is used to match other refs to delete\n    onDelete && (await onDelete(activityId, entityId, refs))\n  }\n\n  const deleteConfirmation = () => {\n    confirmDelete({\n      title: 'Delete comment',\n      message: 'Are you sure you want to delete this comment?',\n      accept: async () => {\n        await handleDelete()\n      },\n    })\n  }\n\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  const mappedReactions = useMemo(\n    () => mapGraphQLReactions(activity.reactions, userName),\n    [[...(activity.reactions || [])]],\n  )\n\n  const reactionChangeHandler = (reaction: Reaction) => {\n    if (reaction.isActive) {\n      createReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        createReactionModel: {\n          reaction: reaction.type,\n        },\n      })\n    } else {\n      deleteReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        reaction: reaction.type,\n      })\n    }\n  }\n\n  const onAnnotationClick = useCallback(\n    (file: any) => {\n      if (!file.annotation) return\n      // annotation frame numbers are 1-based\n      onGoToFrame?.((file.annotation as SavedAnnotationMetadata).range[0])\n      setHighlightedActivities([activityId])\n    },\n    [onGoToFrame],\n  )\n\n  return (\n    <>\n      <Styled.Comment\n        className={clsx('comment', {\n          isOwner,\n          isEditing,\n          isHighlighted,\n          category: !!categoryData && !isGuest,\n        })}\n        id={activityId}\n        $categoryPrimary={categoryData?.color}\n        $categoryTertiary={blendedCategoryColor.primary}\n        $categorySecondary={blendedCategoryColor.secondary}\n      >\n        <ActivityHeader\n          name={authorName}\n          fullName={authorFullName}\n          date={createdAt}\n          isRef={isRef}\n          activity={activity}\n          // projectInfo={projectInfo}\n          projectName={projectName}\n          entityType={entityType}\n          onReferenceClick={onReferenceClick}\n          onReferenceTooltip={setRefTooltip}\n          children={undefined}\n        />\n        <Styled.Body className={clsx('comment-body', { isEditing })}>\n          {!readOnly && isOwner ? (\n            <Styled.Tools className={'tools'}>\n              {onDelete && (\n                <Styled.ToolButton\n                  icon=\"delete\"\n                  onClick={deleteConfirmation}\n                  tooltip=\"Delete comment\"\n                  variant=\"text\"\n                />\n              )}\n              {handleEditComment && (\n                <Styled.ToolButton icon=\"edit_square\" onClick={handleEditComment} variant=\"text\" />\n              )}\n            </Styled.Tools>\n          ) : (\n            <div className=\"tools\"></div>\n          )}\n\n          {!isEditing && !isGuest && categoryData && (\n            <CategoryTag\n              value={categoryData.name}\n              color={categoryData.color}\n              style={{\n                top: -4,\n                left: -4,\n              }}\n              isCompact\n            />\n          )}\n\n          {isEditing ? (\n            <CommentInput\n              initValue={body}\n              initFiles={files}\n              initCategory={categoryData?.name}\n              isEditing\n              onClose={handleEditCancel}\n              onSubmit={handleSave}\n              isOpen={true}\n              {...editProps}\n            />\n          ) : (\n            <>\n              <CommentWrapper>\n                <ReactMarkdown\n                  remarkPlugins={[remarkGfm, emoji, remarkDirective, remarkDirectiveRehype]}\n                  urlTransform={(url) => url}\n                  components={{\n                    // a links\n                    // @ts-ignore\n                    a: (props) =>\n                      // @ts-ignore\n                      aTag(props, {\n                        entityId,\n                        projectName,\n                        projectInfo,\n                        onReferenceClick,\n                        onReferenceTooltip: setRefTooltip,\n                        activityId,\n                        categoryPrimary: categoryData?.color,\n                        categorySecondary: blendedCategoryColor.secondary,\n                      }),\n                    // checkbox inputs\n                    // @ts-ignore\n                    input: (props) => inputTag(props, { activity, onCheckChange }),\n                    // code syntax highlighting\n                    // eslint-disable-next-line\n                    // @ts-ignore\n                    code: (props) => codeTag(props),\n                    // @ts-ignore\n                    blockquote: (props) => blockquoteTag(props),\n                    // @ts-ignore\n                    tip: (props) => (\n                      <Styled.Tip>\n                        <Icon icon=\"info\" />\n                        {props.children}\n                      </Styled.Tip>\n                    ),\n                    // @ts-ignore\n                    status: (props) => {\n                      return (\n                        <ActivityStatus name={props.id} statuses={statuses}>\n                          {props.children}\n                        </ActivityStatus>\n                      )\n                    },\n                  }}\n                >\n                  {body}\n                </ReactMarkdown>\n              </CommentWrapper>\n              {/* file uploads */}\n              {/* @ts-ignore */}\n              <FilesGrid\n                files={files}\n                isCompact={files.length > 6}\n                activityId={activityId}\n                projectName={projectName}\n                isDownloadable\n                onExpand={onFileExpand}\n                onAnnotationClick={onAnnotationClick}\n                onRemove={undefined}\n              />\n            </>\n          )}\n\n          {!isEditing && (\n            <div style={{ marginTop: '16px' }}>\n              {mappedReactions && (\n                <Reactions\n                  reactions={mappedReactions}\n                  changeHandler={reactionChangeHandler}\n                  readOnly={readOnly}\n                  category={categoryData && !isGuest ? categoryData.name : undefined}\n                  categoryPrimary={categoryData?.color}\n                  categorySecondary={blendedCategoryColor.secondary}\n                  categoryTertiary={blendedCategoryColor.primary}\n                />\n              )}\n            </div>\n          )}\n        </Styled.Body>\n      </Styled.Comment>\n    </>\n  )\n}\n\nexport default ActivityComment\n"],"names":["ActivityComment","activity","onCheckChange","onDelete","onUpdate","projectInfo","editProps","projectName","entityType","onReferenceClick","onFileExpand","showOrigin","isHighlighted","readOnly","statuses","userName","createReaction","deleteReaction","editingId","setEditingId","categories","isGuest","useFeedContext","categoryData","useMemo","cat","_a","blendedCategoryColor","useBlendedCategoryColor","body","authorName","authorFullName","createdAt","referenceType","entityId","activityId","author","isOwner","files","origin","onGoToFrame","setHighlightedActivities","useDetailsPanelContext","handleEditComment","handleEditCancel","handleSave","value","data","isEditing","isRef","handleDelete","refs","getTextRefs","deleteConfirmation","confirmDelete","setRefTooltip","useReferenceTooltip","mappedReactions","mapGraphQLReactions","reactionChangeHandler","reaction","onAnnotationClick","useCallback","file","jsx","Fragment","jsxs","Styled.Comment","clsx","ActivityHeader","Styled.Body","Styled.Tools","Styled.ToolButton","CategoryTag","CommentInput","CommentWrapper","ReactMarkdown","remarkGfm","emoji","remarkDirective","remarkDirectiveRehype","url","props","aTag","inputTag","codeTag","blockquoteTag","Styled.Tip","Icon","ActivityStatus","FilesGrid","Reactions"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/ActivityComment/ActivityComment.styled.cjs.js

@@ -1,6 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@ynput/ayon-react-components"),o=require("styled-components");o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@ynput/ayon-react-components"),o=require("styled-components"),i=require("../CommentInput/CommentInput.styled.cjs.js");o.div`
   border-radius: var(--border-radius-m);
-`;const a=o.li`
+`;const s=o.li`
+  /* VARS */
+  --background-color: var(--md-sys-color-surface-container);
+  --button-color-secondary: var(--md-sys-color-surface-container-high);
+  --border-color: transparent;
+
+  /* only apply category colours if category classname is present */
+  &.category {
+    /* CATEGORY */
+    ${({$categoryPrimary:a,$categorySecondary:t,$categoryTertiary:n})=>i.categoryColorCss(a,t,n)}
+  }
+
   /* reset default */
   list-style: none;
   margin: 0;
@@ -39,8 +50,8 @@
   &.isHighlighted {
     background-color: var(--md-sys-color-secondary-container);
   }
-`,i=o.div`
-  background-color: var(--md-sys-color-surface-container);
+`,d=o.div`
+  background-color: var(--background-color);
   border-radius: var(--border-radius-m);
   padding: var(--padding-m);
   padding: 12px 10px;
@@ -48,8 +59,8 @@
 
   /* remove first and last margins */
   /* + * because tools is actual first */
-  & > *:first-child + * {
-    margin-top: 0;
+  & > *:nth-child(2) + * {
+    margin-top: 8px;
   }
 
   & > *:not(.tools):not(h1) {
@@ -154,7 +165,7 @@
     padding: 0;
     border-radius: var(--border-radius-l);
   }
-`,t=o.p`
+`,l=o.p`
   margin: 0;
 
   &:first-child {
@@ -209,7 +220,7 @@
   /* break text */
   overflow-wrap: break-word;
   color: var(--md-sys-color-outline);
-`;const n=o.pre`
+`;const c=o.pre`
   padding: var(--padding-m);
   border-radius: var(--padding-s);
   background-color: var(--md-sys-color-surface-container-lowest);
@@ -224,22 +235,31 @@
   * {
     font-family: monospace !important;
   }
-`,s=o.div`
+`,p=o.div`
   display: flex;
   position: absolute;
   right: 4px;
   top: 4px;
-  background-color: var(--md-sys-color-surface-container-highest);
+  background-color: var(--button-color-secondary);
   border-radius: var(--border-radius-m);
   z-index: 50;
-`,d=o(r.Button)`
-  padding: 4px;
+  padding: 2px;
+  gap: var(--base-gap-small);
+`,m=o(r.Button)`
+  &.hasIcon {
+    padding: 4px;
+  }
+
+  &:hover {
+    background-color: var(--button-color-secondary);
+    filter: brightness(1.2);
+  }
 
   [icon='edit_square'] {
     position: relative;
     top: -1px;
   }
-`,l=o.span`
+`,g=o.span`
   background-color: var(--md-sys-color-secondary-container);
   display: flex;
   align-items: center;
@@ -260,5 +280,5 @@
   .icon {
     font-size: 24px;
   }
-`;exports.BlockCode=n;exports.Body=i;exports.Comment=a;exports.QuoteLine=t;exports.Tip=l;exports.ToolButton=d;exports.Tools=s;
+`;exports.BlockCode=c;exports.Body=d;exports.Comment=s;exports.QuoteLine=l;exports.Tip=g;exports.ToolButton=m;exports.Tools=p;
 //# sourceMappingURL=ActivityComment.styled.cjs.js.map

package/dist/shared/src/containers/Feed/components/ActivityComment/ActivityComment.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityComment.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityComment/ActivityComment.styled.ts"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled, { css } from 'styled-components'\n\nexport const CommentWrapper = styled.div`\n  border-radius: var(--border-radius-m);\n`\n\nexport const Comment = styled.li`\n  /* reset default */\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n\n  width: 100%;\n  padding: var(--padding-m);\n  border-radius: var(--border-radius-m);\n\n  /* hide date and show tools */\n  &.isOwner {\n    /* by default hide menu */\n\n    .tools {\n      opacity: 0;\n    }\n\n    .isEditing {\n      z-index: 1000;\n    }\n\n    :not(.isEditing) {\n      /* on hover show menu and hide date */\n      &:hover {\n        .tools {\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  &.isHighlighted {\n    background-color: var(--md-sys-color-secondary-container);\n  }\n`\n\nexport const Body = styled.div`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  padding: var(--padding-m);\n  padding: 12px 10px;\n  position: relative;\n\n  /* remove first and last margins */\n  /* + * because tools is actual first */\n  & > *:first-child + * {\n    margin-top: 0;\n  }\n\n  & > *:not(.tools):not(h1) {\n    margin-bottom: 0;\n  }\n\n  a {\n    color: var(--md-sys-color-primary);\n  }\n\n  img {\n    width: 100%;\n  }\n\n  p {\n    word-break: break-word;\n    .reference {\n      top: 5px;\n    }\n  }\n\n  h1 {\n    ${theme.titleLarge}\n    font-size: 24px;\n  }\n\n  h2 {\n    ${theme.titleMedium}\n    font-size: 20px;\n  }\n\n  h3 {\n    ${theme.titleSmall}\n    font-size: 16px;\n  }\n\n  h1,\n  h2,\n  h3 {\n    margin-top: 16px;\n  }\n\n  ul,\n  ol {\n    .reference {\n      top: 6px;\n    }\n  }\n\n  .contains-task-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-large);\n    padding-left: 8px;\n    margin: 16px 0;\n\n    li {\n      align-items: center;\n    }\n\n    & > * {\n      padding-left: 1.5rem;\n    }\n\n    p {\n      margin: 0;\n\n      .reference {\n        top: 0px;\n        margin-left: 4px;\n      }\n    }\n  }\n\n  blockquote {\n    margin: 0;\n    padding-left: 16px;\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: var(--md-sys-color-outline-variant);\n      border-radius: 2px;\n    }\n  }\n\n  /* Inline code elements (not in pre blocks) */\n  code:not(pre code) {\n    font-family: monospace;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    padding: 2px 4px;\n    border-radius: 2px;\n  }\n\n  &.isEditing {\n    padding: 0;\n    border-radius: var(--border-radius-l);\n  }\n`\n\nexport const QuoteLine = styled.p`\n  margin: 0;\n\n  &:first-child {\n    margin-top: 14px;\n  }\n\n  &:last-child {\n    margin-bottom: 14px;\n  }\n`\n\nexport const Attachments = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-gap-large);\n`\n\nconst attachmentBase = css`\n  height: 100px;\n  width: 100px;\n  object-fit: contain;\n  padding: 4px;\n  cursor: pointer;\n  position: relative;\n\n  border-radius: var(--border-radius-m);\n  background-color: var(--md-sys-color-surface-container-high);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &:active {\n    background-color: var(--md-sys-color-surface-container-high-active);\n  }\n`\n\nexport const AttachmentImg = styled.img`\n  ${attachmentBase}\n`\n\nexport const AttachmentFile = styled.a`\n  ${attachmentBase}\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  .icon {\n    margin-bottom: 20px;\n    font-size: 32px;\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Name = styled.span`\n  position: absolute;\n  bottom: 4px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  /* break text */\n  overflow-wrap: break-word;\n  color: var(--md-sys-color-outline);\n`\n\nexport const BlockCode = styled.pre`\n  padding: var(--padding-m);\n  border-radius: var(--padding-s);\n  background-color: var(--md-sys-color-surface-container-lowest);\n  font-family: monospace;\n  font-size: var(--md-sys-typescale-body-small-font-size);\n\n  line-break: anywhere;\n  word-break: break-word;\n  overflow: hidden;\n\n  /* Ensure all child elements use monospace font */\n  * {\n    font-family: monospace !important;\n  }\n`\n\nexport const Tools = styled.div`\n  display: flex;\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  background-color: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--border-radius-m);\n  z-index: 50;\n`\n\nexport const ToolButton = styled(Button)`\n  padding: 4px;\n\n  [icon='edit_square'] {\n    position: relative;\n    top: -1px;\n  }\n`\n\nexport const Tip = styled.span`\n  background-color: var(--md-sys-color-secondary-container);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  padding: var(--padding-m);\n  margin: 16px 0 !important;\n\n  &,\n  .icon {\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  p {\n    margin: 0;\n  }\n\n  .icon {\n    font-size: 24px;\n  }\n`\n"],"names":["styled","Comment","Body","theme","QuoteLine","attachmentBase","css","BlockCode","Tools","ToolButton","Button","Tip"],"mappings":"+JAG8BA,EAAO;AAAA;AAAA,EAI9B,MAAMC,EAAUD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyCjBE,EAAOF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiCrBG,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKhBA,QAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKjBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0ETC,EAAYJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYLA,EAAO;AAAA;AAAA;AAAA;AAAA,EAMlC,MAAMK,EAAiBC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBMN,EAAO;AAAA,IAChCK,CAAc;AAAA,EAGYL,EAAO;AAAA,IACjCK,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaEL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpB,MAAMO,EAAYP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBnBQ,EAAQR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUfS,EAAaT,EAAOU,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS1BC,EAAMX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"ActivityComment.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityComment/ActivityComment.styled.ts"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled, { css } from 'styled-components'\nimport { categoryColorCss, CommentProps } from '../CommentInput/CommentInput.styled'\n\nexport const CommentWrapper = styled.div`\n  border-radius: var(--border-radius-m);\n`\n\nexport const Comment = styled.li<CommentProps>`\n  /* VARS */\n  --background-color: var(--md-sys-color-surface-container);\n  --button-color-secondary: var(--md-sys-color-surface-container-high);\n  --border-color: transparent;\n\n  /* only apply category colours if category classname is present */\n  &.category {\n    /* CATEGORY */\n    ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n      categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n  }\n\n  /* reset default */\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n\n  width: 100%;\n  padding: var(--padding-m);\n  border-radius: var(--border-radius-m);\n\n  /* hide date and show tools */\n  &.isOwner {\n    /* by default hide menu */\n\n    .tools {\n      opacity: 0;\n    }\n\n    .isEditing {\n      z-index: 1000;\n    }\n\n    :not(.isEditing) {\n      /* on hover show menu and hide date */\n      &:hover {\n        .tools {\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  &.isHighlighted {\n    background-color: var(--md-sys-color-secondary-container);\n  }\n`\n\nexport const Body = styled.div`\n  background-color: var(--background-color);\n  border-radius: var(--border-radius-m);\n  padding: var(--padding-m);\n  padding: 12px 10px;\n  position: relative;\n\n  /* remove first and last margins */\n  /* + * because tools is actual first */\n  & > *:nth-child(2) + * {\n    margin-top: 8px;\n  }\n\n  & > *:not(.tools):not(h1) {\n    margin-bottom: 0;\n  }\n\n  a {\n    color: var(--md-sys-color-primary);\n  }\n\n  img {\n    width: 100%;\n  }\n\n  p {\n    word-break: break-word;\n    .reference {\n      top: 5px;\n    }\n  }\n\n  h1 {\n    ${theme.titleLarge}\n    font-size: 24px;\n  }\n\n  h2 {\n    ${theme.titleMedium}\n    font-size: 20px;\n  }\n\n  h3 {\n    ${theme.titleSmall}\n    font-size: 16px;\n  }\n\n  h1,\n  h2,\n  h3 {\n    margin-top: 16px;\n  }\n\n  ul,\n  ol {\n    .reference {\n      top: 6px;\n    }\n  }\n\n  .contains-task-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-large);\n    padding-left: 8px;\n    margin: 16px 0;\n\n    li {\n      align-items: center;\n    }\n\n    & > * {\n      padding-left: 1.5rem;\n    }\n\n    p {\n      margin: 0;\n\n      .reference {\n        top: 0px;\n        margin-left: 4px;\n      }\n    }\n  }\n\n  blockquote {\n    margin: 0;\n    padding-left: 16px;\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: var(--md-sys-color-outline-variant);\n      border-radius: 2px;\n    }\n  }\n\n  /* Inline code elements (not in pre blocks) */\n  code:not(pre code) {\n    font-family: monospace;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    padding: 2px 4px;\n    border-radius: 2px;\n  }\n\n  &.isEditing {\n    padding: 0;\n    border-radius: var(--border-radius-l);\n  }\n`\n\nexport const QuoteLine = styled.p`\n  margin: 0;\n\n  &:first-child {\n    margin-top: 14px;\n  }\n\n  &:last-child {\n    margin-bottom: 14px;\n  }\n`\n\nexport const Attachments = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-gap-large);\n`\n\nconst attachmentBase = css`\n  height: 100px;\n  width: 100px;\n  object-fit: contain;\n  padding: 4px;\n  cursor: pointer;\n  position: relative;\n\n  border-radius: var(--border-radius-m);\n  background-color: var(--md-sys-color-surface-container-high);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &:active {\n    background-color: var(--md-sys-color-surface-container-high-active);\n  }\n`\n\nexport const AttachmentImg = styled.img`\n  ${attachmentBase}\n`\n\nexport const AttachmentFile = styled.a`\n  ${attachmentBase}\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  .icon {\n    margin-bottom: 20px;\n    font-size: 32px;\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Name = styled.span`\n  position: absolute;\n  bottom: 4px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  /* break text */\n  overflow-wrap: break-word;\n  color: var(--md-sys-color-outline);\n`\n\nexport const BlockCode = styled.pre`\n  padding: var(--padding-m);\n  border-radius: var(--padding-s);\n  background-color: var(--md-sys-color-surface-container-lowest);\n  font-family: monospace;\n  font-size: var(--md-sys-typescale-body-small-font-size);\n\n  line-break: anywhere;\n  word-break: break-word;\n  overflow: hidden;\n\n  /* Ensure all child elements use monospace font */\n  * {\n    font-family: monospace !important;\n  }\n`\n\nexport const Tools = styled.div`\n  display: flex;\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  background-color: var(--button-color-secondary);\n  border-radius: var(--border-radius-m);\n  z-index: 50;\n  padding: 2px;\n  gap: var(--base-gap-small);\n`\n\nexport const ToolButton = styled(Button)`\n  &.hasIcon {\n    padding: 4px;\n  }\n\n  &:hover {\n    background-color: var(--button-color-secondary);\n    filter: brightness(1.2);\n  }\n\n  [icon='edit_square'] {\n    position: relative;\n    top: -1px;\n  }\n`\n\nexport const Tip = styled.span`\n  background-color: var(--md-sys-color-secondary-container);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  padding: var(--padding-m);\n  margin: 16px 0 !important;\n\n  &,\n  .icon {\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  p {\n    margin: 0;\n  }\n\n  .icon {\n    font-size: 24px;\n  }\n`\n"],"names":["styled","Comment","$categoryPrimary","$categorySecondary","$categoryTertiary","categoryColorCss","Body","theme","QuoteLine","attachmentBase","css","BlockCode","Tools","ToolButton","Button","Tip"],"mappings":"uNAI8BA,EAAO;AAAA;AAAA,EAI9B,MAAMC,EAAUD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASxB,CAAC,CAAE,iBAAAE,EAAkB,mBAAAC,EAAoB,kBAAAC,KACzCC,mBAAiBH,EAAkBC,EAAoBC,CAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ClEE,EAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiCrBO,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKhBA,QAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKjBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0ETC,EAAYR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYLA,EAAO;AAAA;AAAA;AAAA;AAAA,EAMlC,MAAMS,EAAiBC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBMV,EAAO;AAAA,IAChCS,CAAc;AAAA,EAGYT,EAAO;AAAA,IACjCS,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaET,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpB,MAAMW,EAAYX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBnBY,EAAQZ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYfa,EAAab,EAAOc,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1BC,EAAMf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}