feat: add Bazel system-file syntax highlighting and optimize list-page layout (#1610)

- enable Python syntax highlighting for .bzl extension
 - recognize config files: .bazelrc, .buckconfig, .buckversion
 - remove max-width constraint on Issue and CL list pages, switch to responsive layout
 - enrich file-commit details

Author: juanlou1217

moon/apps/web/components/ClView/index.tsx

@@ -494,7 +494,10 @@ export default function CLView() {
       <Heading>Change List</Heading>
       <br />
       <IndexPageContainer>
-        <IndexPageContent id='/[org]/cl' className={cn('@container', '3xl:max-w-7xl max-w-7xl')}>
+        <IndexPageContent
+          id='/[org]/cl'
+          className={cn('@container', 'max-w-full lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl')}
+        >
           <div className='flex h-full flex-col'>
             <div className='mb-4'>
               <div className='group flex min-h-[42px] items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm transition-all focus-within:border-blue-500 focus-within:shadow-md focus-within:ring-2 focus-within:ring-blue-100 hover:border-gray-400'>

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

@@ -8,8 +8,6 @@ import { MemberHovercard } from '@/components/InlinePost/MemberHovercard'
 import { useGetLatestCommit } from '@/hooks/useGetLatestCommit'
 import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
 
-import CommitDetails from './CommitDetails'
-
 const CommitHyStyle = {
   width: '100%',
   background: '#fff',
@@ -78,7 +76,14 @@ export default function CommitHistory({ flag, path, refs }: CommitHistoryProps)
           </Button>
         </Flex>
       </div>
-      {Expand && <CommitDetails />}
+
+      {Expand && commitData && (
+        <p className='ml-4 text-neutral-500'>
+          Signed-off-by: {commitData.author} {'<'}
+          {memberData?.user?.email}
+          {'>'}
+        </p>
+      )}
     </>
   )
 }

moon/apps/web/components/Issues/IssueIndex.tsx

@@ -44,10 +44,13 @@ export const IssueIndex = () => {
           <BreadcrumbTitlebar className='justify-between'>
             <IssueBreadcrumbIcon />
           </BreadcrumbTitlebar>
-          <IndexPageContent id='/[org]/issue' className={cn('@container', '3xl:max-w-7xl max-w-7xl')}>
+          <IndexPageContent
+            id='/[org]/issue'
+            className={cn('@container', 'max-w-full lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl')}
+          >
             <IssueSearch filterQuery={filterQuery} onClearFilters={handleClearFilters} />
-            <IssuesContent 
-              searching={isSearching} 
+            <IssuesContent
+              searching={isSearching}
               setFilterQuery={setFilterQuery}
               onRegisterClearFilters={setOnClearFilters}
             />
@@ -129,4 +132,4 @@ export function IssueIndexEmptyState() {
       </div>
     </IndexPageEmptyState>
   )
-}
+}

moon/apps/web/components/Issues/IssueList.tsx

@@ -40,7 +40,7 @@ export function IssueList<T>({
   return (
     <>
       {!isDark ? (
-        <div className='max-h-[600px] overflow-auto rounded-md border border-[#d0d7de]'>
+        <div className='overflow-auto rounded-md border border-[#d0d7de]'>
           {header}
 
           {isLoading ? (

moon/apps/web/components/Issues/Pagenation.tsx

@@ -34,7 +34,7 @@ export const Pagination = <T extends number>({ totalNum, pageSize, onChange, cur
   }, [current, totalPages])
   return (
     <>
-      <BreadcrumbTitlebar className='h-auto justify-center gap-2 border-b-transparent'>
+      <BreadcrumbTitlebar className='h-auto justify-center gap-2 border-b-transparent pt-1'>
         {current === 1 ? (
           <PreviousOrNext isNext={false} disabled={true} color='text-[#818b98]' />
         ) : (

moon/apps/web/utils/getLanguageDetection.ts

@@ -1,6 +1,5 @@
 'use client'
 
-
 export const LANGUAGE_MAP: Record<string, string> = {
   '.js': 'javascript',
   '.mjs': 'javascript',
@@ -83,31 +82,37 @@ export const LANGUAGE_MAP: Record<string, string> = {
   '.babelrc': 'json',
   '.editorconfig': 'ini',
   '.buckconfig': 'toml',
-  '.swcrc': 'json',
+  '.swcrc': 'json'
 }
 
-
 export const SPECIAL_FILE_MAP: Record<string, string> = {
-  'dockerfile': 'dockerfile',
-  'rakefile': 'ruby',
-  'gemfile': 'ruby',
-  'podfile': 'ruby',
-  'fastfile': 'ruby',
-  'cartfile': 'swift',
+  dockerfile: 'dockerfile',
+  rakefile: 'ruby',
+  gemfile: 'ruby',
+  podfile: 'ruby',
+  fastfile: 'ruby',
+  cartfile: 'swift',
   'package.json': 'json',
   'tsconfig.json': 'json',
   'composer.json': 'json',
   'pom.xml': 'xml',
   'build.gradle': 'groovy',
   'settings.gradle': 'groovy',
-  'buck': 'python',
-  'makefile': 'makefile',
+  buck: 'python',
+  bzl: 'python',
+  build: 'python',
+  workspace: 'python',
+  'workspace.bazel': 'python',
+  'build.bazel': 'python',
+  '.bazelrc': 'ini',
+  '.buckconfig': 'toml',
+  '.buckversion': 'text',
+  makefile: 'makefile',
   'makefile.linux': 'makefile',
   'makefile.win': 'makefile',
-  'makefile.mac': 'makefile',
+  'makefile.mac': 'makefile'
 }
 
-
 export const COMPOUND_EXTENSIONS: Record<string, string> = {
   '.d.ts': 'typescript',
   '.spec.js': 'javascript',
@@ -150,10 +155,9 @@ export const COMPOUND_EXTENSIONS: Record<string, string> = {
   'vitest.config.json': 'json',
   'vitest.config.yaml': 'yaml',
   'vitest.config.yml': 'yaml',
-  'vitest.config.toml': 'toml',
+  'vitest.config.toml': 'toml'
 }
 
-
 export function getLangFromFileName(fileName: string): string {
   if (!fileName) return 'text'
   const lowerFileName = fileName.toLowerCase()