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

src/components/common/code/CodeBlock.scss

@@ -1,77 +1,102 @@
-.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;
 
-  &:hover {
+  &::before {
-    .code-overlay {
+    content: "";
-      opacity: 1;
-    }
-  }
-
-  &.no-word-wrap {
-    white-space: pre;
-    padding-bottom: 0.25rem;
-  }
-
-  html.theme-light & {
-    --color-type: #0053d4;
-    --color-keyword: #388e22;
-    --color-class: #3e6c20;
-    --color-string: #9a1111;
-    --color-template: #9A5334;
-    --color-selector: #9A5334;
-    --color-function: #a753b7;
-    --color-comment: #616161;
-    --color-section: #9a1111;
-    --color-variable: #BD63C5;
-    --color-attribute: #276b8f;
-    --color-link: #276b8f;
-    --color-tag: #000000;
-  }
-
-  html.theme-dark :not(.own) & {
-    --color-type: #56b6c2;
-    --color-keyword: #c678dd;
-    --color-class: #e06c75;
-    --color-string: #98c379;
-    --color-template: #d19a66;
-    --color-selector: #e06c75;
-    --color-function: #61aeee;
-    --color-comment: #5c6370;
-    --color-section: #e06c75;
-    --color-variable: #d19a66;
-    --color-attribute: #d19a66;
-    --color-link: #d19a66;
-    --color-tag: #e06c75;
-  }
-
-  html.theme-dark .own & {
-    --color-type: #9EFFFF;
-    --color-keyword: #ffe900;
-    --color-class: #b2f5ff;
-    --color-string: #fedcad;
-    --color-template: #ffe900;
-    --color-selector: #b2f5ff;
-    --color-function: #87ff91;
-    --color-comment: #cbcbcb;
-    --color-section: #b2f5ff;
-    --color-variable: #ffe900;
-    --color-attribute: #ffe900;
-    --color-link: #ffe900;
-    --color-tag: #b2f5ff;
-  }
-
-
-  .hljs {
     display: block;
-    overflow-x: auto;
+    position: absolute;
-    color: var(--color-text);
+    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;
+      }
+    }
+  
+    &.no-word-wrap {
+      white-space: pre;
+      padding-bottom: 0.25rem;
+    }
+  
+    html.theme-light & {
+      --color-type: #0053d4;
+      --color-keyword: #388e22;
+      --color-class: #3e6c20;
+      --color-string: #9a1111;
+      --color-template: #9A5334;
+      --color-selector: #9A5334;
+      --color-function: #a753b7;
+      --color-comment: #616161;
+      --color-section: #9a1111;
+      --color-variable: #BD63C5;
+      --color-attribute: #276b8f;
+      --color-link: #276b8f;
+      --color-tag: #000000;
+    }
+  
+    html.theme-dark :not(.own) & {
+      --color-type: #56b6c2;
+      --color-keyword: #c678dd;
+      --color-class: #e06c75;
+      --color-string: #98c379;
+      --color-template: #d19a66;
+      --color-selector: #e06c75;
+      --color-function: #61aeee;
+      --color-comment: #5c6370;
+      --color-section: #e06c75;
+      --color-variable: #d19a66;
+      --color-attribute: #d19a66;
+      --color-link: #d19a66;
+      --color-tag: #e06c75;
+    }
+  
+    html.theme-dark .own & {
+      --color-type: #9EFFFF;
+      --color-keyword: #ffe900;
+      --color-class: #b2f5ff;
+      --color-string: #fedcad;
+      --color-template: #ffe900;
+      --color-selector: #b2f5ff;
+      --color-function: #87ff91;
+      --color-comment: #cbcbcb;
+      --color-section: #b2f5ff;
+      --color-variable: #ffe900;
+      --color-attribute: #ffe900;
+      --color-link: #ffe900;
+      --color-tag: #b2f5ff;
+    }
+  
+    .hljs {
+      display: block;
+      overflow-x: auto;
+      color: var(--color-text);
+    }
   }
 }
 

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,22 +31,24 @@ 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 (
-    <pre className={blockClass} data-entity-type={ApiMessageEntityTypes.Pre} data-language={language}>
+    <div className="CodeBlock">
-      {highlighted}
+      {language && (<p className="code-title">{getPrettyCodeLanguageName(language)}</p>)}
-      <CodeOverlay
+      <pre className={blockClass} data-entity-type={ApiMessageEntityTypes.Pre} data-language={language}>
-        text={text}
+        {highlighted ?? text}
-        className="code-overlay"
+        <CodeOverlay
-        onWordWrapToggle={handleWordWrapToggle}
+          text={text}
-        noCopy={noCopy}
+          className="code-overlay"
-      />
+          onWordWrapToggle={handleWordWrapToggle}
-    </pre>
+          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;
+}