Code Block: Add language name; Update design (#3988)

src/components/common/code/CodeBlock.scss

@@ -1,13 +1,38 @@
-.code-block {
+.CodeBlock {
-  white-space: pre-wrap;
   background-color: var(--color-code-bg);
   margin: 0;
-  padding: 0.5rem;
+  padding: 0.1875rem 0.375rem 0.1875rem 0.6875rem;
   margin-block: 0.25rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   position: relative;
   overflow: hidden;
 
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    bottom: 0;
+    width: 0.1875rem;
+    background: var(--bar-gradient, var(--accent-color));
+  }
+
+  .code-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    color: var(--accent-color);
+    font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
+  }
+
+  .code-block {
+    margin: 0;
+    white-space: pre-wrap;
+    overflow: hidden;
+
     &:hover {
       .code-overlay {
         opacity: 1;
@@ -67,12 +92,12 @@
       --color-tag: #b2f5ff;
     }
   
-
     .hljs {
       display: block;
       overflow-x: auto;
       color: var(--color-text);
     }
+  }
 }
 
 .hljs-keyword,

src/components/common/code/CodeBlock.tsx

@@ -4,11 +4,11 @@ import React, { memo, useCallback, useState } from '../../../lib/teact/teact';
 import { ApiMessageEntityTypes } from '../../../api/types';
 
 import buildClassName from '../../../util/buildClassName';
+import { getPrettyCodeLanguageName } from '../../../util/prettyCodeLanguageNames';
 
 import useAsync from '../../../hooks/useAsync';
 
 import CodeOverlay from './CodeOverlay';
-import PreBlock from './PreBlock';
 
 import './CodeBlock.scss';
 
@@ -31,15 +31,16 @@ const CodeBlock: FC<OwnProps> = ({ text, language, noCopy }) => {
     setWordWrap(wrap);
   }, []);
 
-  if (!highlighted) {
+  const blockClass = buildClassName(
-    return <PreBlock text={text} noCopy={noCopy} />;
+    'code-block',
-  }
+    !isWordWrap && 'no-word-wrap',
-
+  );
-  const blockClass = buildClassName('code-block', !isWordWrap && 'no-word-wrap');
 
   return (
+    <div className="CodeBlock">
+      {language && (<p className="code-title">{getPrettyCodeLanguageName(language)}</p>)}
       <pre className={blockClass} data-entity-type={ApiMessageEntityTypes.Pre} data-language={language}>
-      {highlighted}
+        {highlighted ?? text}
         <CodeOverlay
           text={text}
           className="code-overlay"
@@ -47,6 +48,7 @@ const CodeBlock: FC<OwnProps> = ({ text, language, noCopy }) => {
           noCopy={noCopy}
         />
       </pre>
+    </div>
   );
 };
 

src/util/prettyCodeLanguageNames.ts

@@ -0,0 +1,42 @@
+const PRETTY_BY_ALIAS: Record<string, string | undefined> = {
+  js: 'JavaScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  typescript: 'TypeScript',
+  python: 'Python',
+  py: 'Python',
+  go: 'Go',
+  rust: 'Rust',
+  func: 'FunC',
+  c: 'C',
+  'c++': 'C++',
+  cpp: 'C++',
+  fortran: 'Fortran',
+  f90: 'Fortran',
+  f: 'Fortran',
+  java: 'Java',
+  sql: 'SQL',
+  swift: 'Swift',
+  'objective-c': 'Objective-C',
+  kotlin: 'Kotlin',
+  ruby: 'Ruby',
+  rb: 'Ruby',
+  php: 'PHP',
+  perl: 'Perl',
+  bash: 'Bash',
+  sh: 'Shell',
+  markdown: 'Markdown',
+  'c#': 'C#',
+  cs: 'C#',
+  json: 'JSON',
+  yaml: 'YAML',
+  yml: 'YAML',
+  solidity: 'Solidity',
+  sol: 'Solidity',
+  tl: 'TL',
+};
+
+export function getPrettyCodeLanguageName(codeLanguage: string) {
+  const prettyLangName = PRETTY_BY_ALIAS[codeLanguage.toLowerCase()];
+  return prettyLangName ?? codeLanguage;
+}