refactor(UI):The timeline and tab components of the MR Page

moon/apps/web/components/DiffView/FileDiff.tsx

@@ -98,7 +98,7 @@ export default function FileDiff({ diffs }: { diffs: string }) {
   }
 
   return (
-    <div className='flex font-sans'>
+    <div className='flex font-sans mt-3'>
       <div
         className='rounded-lg w-[300px] h-[85vh]  p-2 overflow-y-auto sticky top-5'
       >

moon/apps/web/components/MrView/MRComment.tsx

@@ -76,7 +76,7 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
         </Dropdown>
       }
     >
-      <div className='prose'>
+      <div className='prose copyable-text'>
         <RichTextRenderer content={conv.comment} extensions={extensions} />
       </div>
     </Card>

moon/apps/web/components/MrView/TimelineItems.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import '@primer/primitives/dist/css/functional/themes/light.css'
+import { BaseStyles, ThemeProvider, Timeline } from '@primer/react'
+import { FeedPullRequestClosedIcon, CommentIcon, FeedMergedIcon, IssueReopenedIcon } from '@primer/octicons-react'
+import MRComment from '@/components/MrView/MRComment';
+import { formatDistance, fromUnixTime } from 'date-fns';
+import { MRDetail } from '@/pages/[org]/mr/[id]';
+
+interface TimelineItemProps {
+  badge?: React.ReactNode
+  children?: React.ReactNode
+  isOver?: boolean
+}
+
+interface ConvItem {
+  id: number
+  badge?: React.ReactNode
+  children?: React.ReactNode
+  isOver: boolean;
+}
+
+interface TimelineWrapperProps {
+  convItems?: ConvItem[];
+}
+
+
+const TimelineItem = ({ badge, children, isOver }: TimelineItemProps) => {
+  return (
+    <>
+      <Timeline.Item>
+        <Timeline.Badge>{badge}</Timeline.Badge>
+        <Timeline.Body>{children}</Timeline.Body>
+      </Timeline.Item>
+      {isOver && <Timeline.Break />}
+    </>
+  )
+}
+
+const TimelineWrapper: React.FC<TimelineWrapperProps> = ({ convItems = [] }) => {
+  return (
+    <ThemeProvider>
+      <BaseStyles>
+        <Timeline clipSidebar>
+          {convItems?.map((item) => (
+            <TimelineItem key={item.id} badge={item.badge} isOver={item.isOver}>
+              {item.children}
+            </TimelineItem>
+          ))}
+        </Timeline>
+      </BaseStyles>
+    </ThemeProvider>
+  );
+};
+
+const TimelineItems: React.FC<{ mrDetail?: MRDetail, id: string }> = ({ mrDetail, id }) => {
+  if (!mrDetail) {
+    return null; 
+  }
+
+  const convItems: ConvItem[] = mrDetail?.conversations.map((conv) => {
+    let icon;
+    let children;
+    let isOver = false;
+
+    switch (conv.conv_type) {
+      case 'Comment':
+        icon = <CommentIcon />;
+        children = <MRComment conv={conv} id={id} whoamI="mr" />;
+        break;
+      case 'Merged':
+        icon = <FeedMergedIcon size={24} className="text-purple-500" />;
+        children =
+          'Merged via the queue into main ' +
+          formatDistance(fromUnixTime(conv.created_at), new Date(), { addSuffix: true });
+        isOver = true;
+        break;
+      case 'Closed':
+        icon = <FeedPullRequestClosedIcon size={24} className="text-red-500" />;
+        children = conv.comment;
+        isOver = true;
+        break;
+      case 'Reopen':
+        icon = <IssueReopenedIcon />;
+        children = conv.comment;
+        break;
+    }
+
+    return { badge: icon, children, isOver, id: conv.id };
+  });
+
+  return <TimelineWrapper convItems={convItems} />;
+};
+
+export default TimelineItems;

moon/apps/web/package.json

@@ -21,7 +21,7 @@
     "@ant-design/icons": "catalog:",
     "@emoji-mart/data": "catalog:",
     "@emotion/styled": "catalog:",
-    "@git-diff-view/react": "0.0.26",
+    "@git-diff-view/react": "catalog:",
     "@gitmono/config": "workspace:*",
     "@gitmono/editor": "workspace:*",
     "@gitmono/regex": "workspace:*",
@@ -35,8 +35,9 @@
     "@next/bundle-analyzer": "catalog:",
     "@octokit/auth-app": "catalog:",
     "@octokit/core": "catalog:",
-    "@primer/primitives": "^10.7.0",
-    "@primer/react": "^37.27.0",
+    "@primer/octicons-react": "catalog:",
+    "@primer/primitives": "catalog:",
+    "@primer/react": "catalog:",
     "@radix-ui/react-accordion": "catalog:",
     "@radix-ui/react-dialog": "catalog:",
     "@radix-ui/react-hover-card": "catalog:",
@@ -68,7 +69,7 @@
     "deepmerge": "catalog:",
     "fast-deep-equal": "catalog:",
     "framer-motion": "catalog:",
-    "fuse.js": "^7.1.0",
+    "fuse.js": "catalog:",
     "github-markdown-css": "catalog:",
     "gray-matter": "catalog:",
     "jotai": "catalog:",
@@ -125,7 +126,7 @@
     "react-wrap-balancer": "catalog:",
     "remeda": "catalog:",
     "slugify": "catalog:",
-    "styled-components": "^6.1.19",
+    "styled-components": "catalog:",
     "tippy.js": "catalog:",
     "use-debounce": "catalog:",
     "use-sound": "catalog:",