feat(UI): add CommitHistory component and integrate into CodeView

moon/apps/web/components/CodeView/BlobView/CodeContent.module.css

@@ -1,8 +1,8 @@
-
 .codeLineNumber {
     margin-left: 4px;
     margin-right: 25px;
-    text-align: center;
+    align-items: center;
+    align-self: center;
     user-select: none;
 }
 

moon/apps/web/components/CodeView/BlobView/CodeContent.tsx

@@ -1,14 +1,13 @@
-'use client'
-import 'github-markdown-css/github-markdown-light.css'
+'use client';
 
-import { useEffect, useRef, useState } from 'react'
-import { ListIcon } from '@gitmono/ui'
-import { Button, Dropdown, MenuProps, message} from 'antd'
-import { Highlight, themes } from 'prism-react-renderer'
+import { useEffect, useRef, useState } from 'react';
+import { Button, Dropdown, MenuProps, message } from 'antd';
+import { Highlight, themes } from 'prism-react-renderer';
+import { DotsHorizontal } from '@gitmono/ui';
 
-import styles from './CodeContent.module.css'
+import 'github-markdown-css/github-markdown-light.css';
+import styles from './CodeContent.module.css';
 
-// @ts-ignore
 const CodeContent = ({ fileContent, path }: { fileContent: string, path?: string[] }) => {
   const [lfs, setLfs] = useState(false)
   const [selectedLine, setSelectedLine] = useState<number | null>(null)
@@ -18,6 +17,18 @@ const CodeContent = ({ fileContent, path }: { fileContent: string, path?: string
       {
         label: 'Copy line',
         key: '1'
+      },
+      {
+        label: 'Copy permalink',
+        key: '2'
+      },
+      {
+        label: 'View file in GitHub.dev',
+        key: '3'
+      },
+      {
+        label: 'View file in different branch/tag',
+        key: '4'
       }
     ]
   }
@@ -175,36 +186,38 @@ const CodeContent = ({ fileContent, path }: { fileContent: string, path?: string
                   style={{
                     backgroundColor: selectedLine === i ? '#f0f7ff' : 'transparent'
                   }}
+                  className='flex h-6 items-center'
                 >
-                  <div className='h-6 justify-center items-center align-middle'>
-                    <span className='inline-block w-8 text-center justify-center items-center'>
-                      {selectedLine === i ?
-                        <Dropdown
-                          menu={{
-                            ...menuItems,
-                            onClick: (props) => {
-                              if(props.key === '1') {
-                                handleCopyLine(line.map(i=>i.content).join(''))
-                              }
+                  <span className='inline-block w-8'>
+                    {selectedLine === i ?
+                      <Dropdown
+                        menu={{
+                          ...menuItems,
+                          onClick: (props) => {
+                            if(props.key === '1') {
+                              handleCopyLine(line.map(i=>i.content).join(''))
                             }
-                          }}
-                          className='bg-gray-100 border rounded border-gray-200 justify-center'
-
-                        >
-                          <Button icon={<ListIcon />} size={'small'}/>
-                        </Dropdown>
-                        :
-                        null
-                      }
-                    </span>
-                    <span className={styles.codeLineNumber} onClick={() => handleLineClick(i)}>
-                      {i + 1}
-                    </span>
-                    {line.map((token, key) => (
-                      // eslint-disable-next-line react/no-array-index-key
-                      <span key={key} {...getTokenProps({ token })} />
-                    ))}
-                  </div>
+                          }
+                        }}
+                        className='bg-gray-100 border rounded border-gray-200'
+                      >
+                        <Button
+                          icon={<DotsHorizontal />}
+                          size={'small'}
+                          className='h-6 w-6 p-0 flex'
+                        />
+                      </Dropdown>
+                      :
+                      null
+                    }
+                  </span>
+                  <span className={styles.codeLineNumber} onClick={() => handleLineClick(i)}>
+                    {i + 1}
+                  </span>
+                  {line.map((token, key) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
                 </div>
               ))}
             {lfs && <span>(Sorry about that, but we can’t show files that are this big right now.)</span>}

moon/apps/web/components/CodeView/CommitHistory.tsx

@@ -0,0 +1,49 @@
+import { Card, Flex } from '@radix-ui/themes'
+import { Avatar, Button, ClockIcon } from '@gitmono/ui'
+import { MemberHovercard } from '@/components/InlinePost/MemberHovercard'
+
+interface UserInfo {
+  avatar_url: string
+  name: string
+}
+
+export interface CommitInfo {
+  user: UserInfo
+  message: string
+  hash: string
+  date: string
+}
+
+export default function CommitHistory({ info }: { info: CommitInfo }) {
+  return (
+    <Card style={{ width: '100%', background: '#fff', border: '1px solid #d1d9e0', borderRadius: 8 }}>
+      <Flex align='center' className='p-2'>
+        <MemberHovercard username={info.user.name} role='member'>
+          <Flex align='center'>
+            <Avatar src={info.user.avatar_url} />
+            <span className="font-bold mx-3">
+              {info.user.name}
+            </span>
+          </Flex>
+        </MemberHovercard>
+        <span className='text-gray-500 text-sm'>
+          {info.message}
+        </span>
+
+        <span className='text-gray-400 text-xs ml-auto mr-3'>
+          {info.hash} · {info.date}
+        </span>
+        <Button
+          size='large'
+          variant='plain'
+          className='flex items-center'
+        >
+          <Flex align='center'>
+            <ClockIcon size={24} />
+            <span className='ml-2'>History</span>
+          </Flex>
+        </Button>
+      </Flex>
+    </Card>
+  )
+}

moon/apps/web/pages/[org]/code/blob/[...path].tsx

@@ -7,13 +7,14 @@ import AuthAppProviders from '@/components/Providers/AuthAppProviders'
 import { useGetBlob } from '@/hooks/useGetBlob'
 import { useRouter } from 'next/router'
 import { CommentSection } from '@/components/CodeView/BlobView/CommentSection'
+import CommitHistory, { CommitInfo } from '@/components/CodeView/CommitHistory'
 
 const codeStyle = {
   borderRadius: 8,
   width: 'calc(85% - 8px)',
   background: '#fff',
   border: '1px solid #d1d9e0',
-  margin: '0 10px'
+  margin: '0 8px'
 }
 
 interface Comment {
@@ -67,6 +68,16 @@ function BlobPage() {
       ]
     }
   ]
+  const commitInfo: CommitInfo = {
+    user: {
+      avatar_url: 'https://avatars.githubusercontent.com/u/112836202?v=4&size=40',
+      name: 'yetianxing2014'
+    },
+    message: 'feat: migrate campsite to mega',
+    hash: '5fe4235',
+    date: '3 months ago'
+  }
+
   const handleAddComment = (__content: string, __lineNumber?: number) => {
     //wait for complete
   }
@@ -78,17 +89,22 @@ function BlobPage() {
 
   return (
     <div style={{overflow: 'auto'}}>
-      <Flex gap='middle' wrap>
+      <Flex vertical gap='middle'>
         <Layout>
           <BreadCrumb path={path} />
         </Layout>
-        <Layout style={codeStyle}>
-          <CodeContent fileContent={fileContent} path={path} />
-        </Layout>
-        <Layout>
-          {/* @ts-ignore */}
-          <CommentSection comments={mockComments} onAddComment={handleAddComment} onReplyComment={handleReplyComment} />
+        <Layout className='m-2'>
+          <CommitHistory info={commitInfo}/>
         </Layout>
+        <Flex gap='middle' wrap>
+          <Layout style={codeStyle}>
+            <CodeContent fileContent={fileContent} path={path} />
+          </Layout>
+          <Layout>
+            {/* @ts-ignore */}
+            <CommentSection comments={mockComments} onAddComment={handleAddComment} onReplyComment={handleReplyComment} />
+          </Layout>
+        </Flex>
       </Flex>
     </div>
   )