feat: improving the styles and functionality of the PR detail page

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation-data.ts

@@ -0,0 +1,297 @@
+export const data = [
+  {
+    author: {
+      id: 1,
+      uid: 'user1',
+      display_name: 'Developer On1e',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    created: 1737724536265,
+    edited: 1737724536265,
+    id: 66,
+    kind: 'change-comment',
+    order: 1,
+    parent_id: null,
+    payload: {
+      id: 66,
+      created: 1737724536265,
+      updated: 1737733066705,
+      edited: 1737724536265,
+      parent_id: null,
+      repo_id: 2,
+      pullreq_id: 11,
+      order: 1,
+      sub_order: 0,
+      type: 'code-comment',
+      kind: 'change-comment',
+      text: 'Added import for tailwindcss-animate and PluginAPI configuration',
+      payload: {
+        title: '@@ -0,0 +1,4 @@',
+        lines: [
+          "+import tailwindcssAnimate from 'tailwindcss-animate'",
+          "+import { PluginAPI } from 'tailwindcss/types/config'",
+          '+',
+          '+export default {'
+        ],
+        line_start_new: true,
+        line_end_new: true
+      },
+      resolved: 1737733066705,
+      author: {
+        id: 1,
+        uid: 'user1',
+        display_name: 'Developer One',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      },
+      resolver: {
+        id: 1,
+        uid: 'user1',
+        display_name: 'Developer One',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      },
+      code_comment: {
+        outdated: false,
+        merge_base_sha: '12421f51a7cca90376cba8de0fe9b3289eb6e218',
+        source_sha: '34f4d7bbfeda153e4965395ac6a20e80dec63e57',
+        path: 'packages/canary/configs/tailwind.ts',
+        line_new: 2,
+        span_new: 1,
+        line_old: 0,
+        span_old: 0
+      }
+    },
+    pullreq_id: 11,
+    repo_id: 2,
+    resolved: 1737733066705,
+    resolver: {
+      id: 1,
+      uid: 'user1',
+      display_name: 'Developer One',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    sub_order: 0,
+    text: 'Added import for tailwindcss-animate and PluginAPI configuration',
+    type: 'code-comment',
+    updated: 1737733066705
+  },
+  {
+    author: {
+      id: 2,
+      uid: 'user2',
+      display_name: 'Developer Two',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    created: 1737726929298,
+    edited: 1737726929298,
+    id: 67,
+    kind: 'change-comment',
+    order: 1,
+    parent_id: 66,
+    payload: {
+      id: 67,
+      created: 1737726929298,
+      updated: 1737726929298,
+      edited: 1737726929298,
+      parent_id: 66,
+      repo_id: 2,
+      pullreq_id: 11,
+      order: 1,
+      sub_order: 1,
+      type: 'comment',
+      kind: 'change-comment',
+      text: 'This import will help with animation configurations',
+      payload: {},
+      author: {
+        id: 2,
+        uid: 'user2',
+        display_name: 'Developer Two',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      }
+    },
+    pullreq_id: 11,
+    repo_id: 2,
+    sub_order: 1,
+    text: 'This import will help with animation configurations',
+    type: 'comment',
+    updated: 1737726929298
+  },
+  {
+    author: {
+      id: 3,
+      uid: 'user3',
+      display_name: 'Developer Three',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    created: 1737727497246,
+    edited: 1737727497246,
+    id: 68,
+    kind: 'comment',
+    order: 2,
+    parent_id: null,
+    payload: {
+      id: 68,
+      created: 1737727497246,
+      updated: 1737737257708,
+      edited: 1737727497246,
+      parent_id: null,
+      repo_id: 2,
+      pullreq_id: 11,
+      order: 2,
+      sub_order: 0,
+      type: 'comment',
+      kind: 'comment',
+      text: "Let's discuss the plugin configuration approach",
+      payload: {},
+      resolved: 1737737257708,
+      author: {
+        id: 3,
+        uid: 'user3',
+        display_name: 'Developer Three',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      },
+      resolver: {
+        id: 3,
+        uid: 'user3',
+        display_name: 'Developer Three',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      }
+    },
+    pullreq_id: 11,
+    repo_id: 2,
+    resolved: 1737737257708,
+    resolver: {
+      id: 3,
+      uid: 'user3',
+      display_name: 'Developer Three',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    sub_order: 0,
+    text: "Let's discuss the plugin configuration approach",
+    type: 'comment',
+    updated: 1737737257708
+  },
+  {
+    author: {
+      id: 4,
+      uid: 'user4',
+      display_name: 'Developer Four',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    created: 1737735053391,
+    edited: 1737735053391,
+    id: 69,
+    kind: 'comment',
+    order: 2,
+    parent_id: 68,
+    payload: {
+      id: 69,
+      created: 1737735053391,
+      updated: 1737735053391,
+      edited: 1737735053391,
+      parent_id: 68,
+      repo_id: 2,
+      pullreq_id: 11,
+      order: 2,
+      sub_order: 1,
+      type: 'comment',
+      kind: 'comment',
+      text: 'We should consider adding type definitions',
+      payload: {},
+      author: {
+        id: 4,
+        uid: 'user4',
+        display_name: 'Developer Four',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      }
+    },
+    pullreq_id: 11,
+    repo_id: 2,
+    sub_order: 1,
+    text: 'We should consider adding type definitions',
+    type: 'comment',
+    updated: 1737735053391
+  },
+  {
+    author: {
+      id: 5,
+      uid: 'user5',
+      display_name: 'Developer Five',
+      email: '[email protected]',
+      type: 'user',
+      created: 1736953478893,
+      updated: 1736953614668
+    },
+    created: 1737735323065,
+    edited: 1737735323065,
+    id: 70,
+    kind: 'comment',
+    order: 2,
+    parent_id: 68,
+    payload: {
+      id: 70,
+      created: 1737735323065,
+      updated: 1737735323065,
+      edited: 1737735323065,
+      parent_id: 68,
+      repo_id: 2,
+      pullreq_id: 11,
+      order: 2,
+      sub_order: 2,
+      type: 'comment',
+      kind: 'comment',
+      text: 'I suggest we also include documentation for the animation options',
+      payload: {},
+      author: {
+        id: 5,
+        uid: 'user5',
+        display_name: 'Developer Five',
+        email: '[email protected]',
+        type: 'user',
+        created: 1736953478893,
+        updated: 1736953614668
+      }
+    },
+    pullreq_id: 11,
+    repo_id: 2,
+    sub_order: 2,
+    text: 'I suggest we also include documentation for the animation options',
+    type: 'comment',
+    updated: 1737735323065
+  }
+]

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx

@@ -201,7 +201,6 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
               handleSaveComment={noop}
               currentUser={{ display_name: currentUserData?.display_name, uid: currentUserData?.uid }}
               onCopyClick={noop}
-              onCommentSaveAndStatusChange={noop}
               toggleConversationStatus={noop}
               onCommitSuggestion={noop}
               addSuggestionToBatch={noop}

packages/ui/src/components/badge.tsx

@@ -34,7 +34,7 @@ const badgeVariants = cva(
         lg: 'px-3 py-1 text-xs font-normal',
         md: 'h-6 px-2.5',
         sm: 'h-5 px-1 text-12',
-        xs: 'px-1.5 py-0 text-11 font-light'
+        xs: 'h-[18px] px-1.5 text-11 font-light'
       },
       borderRadius: {
         default: 'rounded-md',

packages/ui/src/components/button.tsx

@@ -6,7 +6,7 @@ import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:pointer-events-none disabled:cursor-not-allowed',
+  'inline-flex items-center justify-center whitespace-nowrap rounded text-14 font-medium transition-colors disabled:pointer-events-none disabled:cursor-not-allowed',
   {
     variants: {
       variant: {

packages/ui/src/components/icon.tsx

@@ -9,6 +9,7 @@ import AppleShortcut from '../icons/apple-shortcut.svg'
 import ArrowLong from '../icons/arrow-long.svg'
 import ArtifactsGradient from '../icons/artifacts-gradient.svg'
 import Artifacts from '../icons/artifacts-icon.svg'
+import AttachmentImage from '../icons/attachment-image.svg'
 import Attachment from '../icons/attachment.svg'
 import BitrisePlugin from '../icons/bitrise-plugin.svg'
 import Bold from '../icons/bold.svg'
@@ -45,6 +46,7 @@ import CloudCosts from '../icons/cloud-costs-icon.svg'
 import CodeBrackets from '../icons/code-brackets.svg'
 import Code from '../icons/code.svg'
 import Cog6 from '../icons/cog-6.svg'
+import CollapseComment from '../icons/collapse-comment.svg'
 import CollapseDiff from '../icons/collapse-diff.svg'
 import Comments from '../icons/comments.svg'
 import Compare from '../icons/compare.svg'
@@ -67,6 +69,7 @@ import Edit from '../icons/edit-icon.svg'
 import Environment from '../icons/environment-icon.svg'
 import ExecutionGradient from '../icons/execution-gradient.svg'
 import Execution from '../icons/execution-icon.svg'
+import ExpandComment from '../icons/expand-comment.svg'
 import ExpandDiff from '../icons/expand-diff.svg'
 import Eye from '../icons/eye-icon.svg'
 import Fail from '../icons/fail.svg'
@@ -159,6 +162,7 @@ import Stack from '../icons/stack-icon.svg'
 import Star from '../icons/star-icon.svg'
 import SubMenuEllipse from '../icons/sub-menu-ellipse.svg'
 import Success from '../icons/success.svg'
+import Suggestion from '../icons/suggestion.svg'
 import SupplyChainGradient from '../icons/supply-chain-gradient.svg'
 import SupplyChain from '../icons/supply-chain-icon.svg'
 import Tag from '../icons/tag.svg'
@@ -359,7 +363,11 @@ const IconNameMap = {
   'collapse-diff': CollapseDiff,
   'expand-diff': ExpandDiff,
   'circle-plus': CirclePlus,
-  'code-brackets': CodeBrackets
+  'code-brackets': CodeBrackets,
+  'attachment-image': AttachmentImage,
+  'collapse-comment': CollapseComment,
+  'expand-comment': ExpandComment,
+  suggestion: Suggestion
 } satisfies Record<string, React.FunctionComponent<React.SVGProps<SVGSVGElement>>>
 
 export interface IconProps {

packages/ui/src/components/node-group.tsx

@@ -59,12 +59,8 @@ function Content({ children }: { children: ReactNode }) {
 function Connector({ first, last, className }: { first?: boolean; last?: boolean; className?: string }) {
   return (
     <div
-      className={cn(
-        'absolute bottom-0 left-[11px] top-0 z-10 w-1',
-        { 'top-3': first },
-        { 'bottom-8': last },
-        className
-      )}
+      className={cn('absolute bottom-0 left-2.5 top-0 z-10 w-1', { 'top-3': first }, { 'bottom-8': last }, className)}
+      data-connector
     >
       <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-borders-4" />
     </div>