docs: redesign code highlights + add default code titles (#8628)

* docs: code highlights improvements + default titles

* spacing fixes

* fix terminal detection

* add padding for non-terminal one liners

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -38,6 +38,7 @@ export type CodeBlockMetaFields = {
   noLineNumbers?: boolean
   collapsibleLines?: string
   expandButtonLabel?: string
+  isTerminal?: boolean
 } & CodeBlockHeaderMeta
 
 export type CodeBlockStyle = "loud" | "subtle"
@@ -68,6 +69,7 @@ export const CodeBlock = ({
   children,
   collapsibleLines,
   expandButtonLabel,
+  isTerminal,
   ...rest
 }: CodeBlockProps) => {
   if (!source && typeof children === "string") {
@@ -80,9 +82,25 @@ export const CodeBlock = ({
   const codeRef = useRef<HTMLElement>(null)
   const apiRunnerRef = useRef<HTMLDivElement>(null)
   const [scrollable, setScrollable] = useState(false)
+  const isTerminalCode = useMemo(() => {
+    return isTerminal === undefined
+      ? lang === "bash" && !source.startsWith("curl")
+      : isTerminal
+  }, [isTerminal, lang])
+  const codeTitle = useMemo(() => {
+    if (title || hasTabs) {
+      return title
+    }
+
+    if (isTerminalCode) {
+      return "Terminal"
+    }
+
+    return "Code"
+  }, [title, isTerminalCode, hasTabs])
   const hasInnerCodeBlock = useMemo(
-    () => hasTabs || title.length > 0,
-    [hasTabs, title]
+    () => hasTabs || codeTitle.length > 0,
+    [hasTabs, codeTitle]
   )
   const canShowApiTesting = useMemo(
     () =>
@@ -198,6 +216,7 @@ export const CodeBlock = ({
           key={offsettedLineNumber}
           lineNumberColorClassName={lineNumbersColor}
           lineNumberBgClassName={innerBgColor}
+          isTerminal={isTerminalCode}
           {...highlightProps}
         />
       )
@@ -260,16 +279,15 @@ export const CodeBlock = ({
           hasInnerCodeBlock && "rounded-docs_lg",
           !hasInnerCodeBlock && "rounded-docs_DEFAULT",
           !hasTabs && boxShadow,
-          (blockStyle === "loud" || colorMode !== "light") &&
-            "code-block-highlight-dark",
+          blockStyle === "loud" && "code-block-highlight",
           blockStyle === "subtle" &&
             colorMode === "light" &&
             "code-block-highlight-light"
         )}
       >
-        {title && (
+        {codeTitle && (
           <CodeBlockHeader
-            title={title}
+            title={codeTitle}
             blockStyle={blockStyle}
             badgeLabel={rest.badgeLabel}
             badgeColor={rest.badgeColor}
@@ -334,17 +352,20 @@ export const CodeBlock = ({
                     "rounded-docs_DEFAULT",
                     !hasInnerCodeBlock &&
                       tokens.length <= 1 &&
-                      "px-docs_0.5 py-[6px]",
-                    !title.length && (!noCopy || !noReport) && "xs:max-w-[83%]",
-                    noLineNumbers && "pl-docs_1",
+                      "px-docs_1 py-[6px]",
+                    !codeTitle.length &&
+                      (!noCopy || !noReport) &&
+                      "xs:max-w-[83%]",
+                    (noLineNumbers ||
+                      (tokens.length <= 1 && !isTerminalCode)) &&
+                      "pl-docs_1",
                     preClassName
                   )}
                 >
                   <code
                     className={clsx(
                       "text-code-body font-monospace table min-w-full print:whitespace-pre-wrap",
-                      tokens.length > 1 && "py-docs_0.75",
-                      tokens.length <= 1 && "!py-[6px] px-docs_0.5"
+                      "py-docs_0.75"
                     )}
                     ref={codeRef}
                   >
@@ -364,7 +385,7 @@ export const CodeBlock = ({
                       })}
                   </code>
                 </pre>
-                {!title && (
+                {!hasInnerCodeBlock && (
                   <CodeBlockActions
                     {...actionsProps}
                     inHeader={false}