improvement(docs): flatten the academy learn/chapters panels (#5253)

* improvement(docs): flatten the academy learn/chapters panels

The "What you will learn" and "Chapters" panels were filled, bordered
cards — the only boxed elements on the page. The docs design system is
explicitly flat: global.css strips fumadocs cards/callouts/card-grids to
transparent/divider-based, and the right-rail "On this page" TOC is small,
muted, and borderless.

- WhatYouWillLearn (inline): flat divider list like the FAQ, with a small
  panel label at the app's text scale instead of a page-h2-scale title
- VideoChapters (right rail): borderless, matching the TOC — small muted
  label + flat hover rows, no card chrome

* improvement(docs): drop the repeated per-row play icon from the chapters list

The CirclePlay glyph repeated on every chapter row read as noise — a column
of identical icons down the rail. The "On this page" TOC this list mirrors
has no per-row icons; the timestamps already signal video chapters and the
hover highlight signals they're seekable. Rows are now text + time only.

* improvement(docs): drop the under-label rule on the learn callout

A full-width rule under the small "What you will learn" label read as an
awkward heading underline and blurred into the inter-item dividers. The label
is now a quiet muted marker (matching the Chapters label and the TOC heading),
with dividers only between items — so it never competes with the bold item
titles or looks like an underlined heading.

Author: waleedlatif1

apps/docs/components/ui/video-chapters.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { CirclePlay } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 /** Parse a chapter timestamp ("M:SS" or "H:MM:SS") into seconds. */
@@ -26,9 +25,10 @@ interface VideoChaptersProps {
 }
 
 /**
- * Right-rail panel listing the current video's chapters, styled to match the
- * Academy's course panels. Rows are skip-to controls; they activate once the
- * lesson's video is recorded.
+ * Right-rail list of the current video's chapters — flat and borderless to
+ * match the docs' "On this page" TOC (small muted label, hover-highlighted
+ * rows). Rows are skip-to controls; they activate once the lesson's video is
+ * recorded.
  */
 export function VideoChapters({ title = 'Chapters', chapters, className }: VideoChaptersProps) {
   // Chapters only seek when a VideoPlaceholder with a real video is on the page.
@@ -42,13 +42,8 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
   }, [])
 
   return (
-    <aside
-      className={cn(
-        'not-prose rounded-xl border border-[var(--border-1)] bg-[var(--surface-3)] p-5',
-        className
-      )}
-    >
-      <h2 className='mt-0 mb-3 font-semibold text-[var(--text-primary)] text-lg'>{title}</h2>
+    <aside className={cn('not-prose', className)}>
+      <p className='mb-2 px-2.5 font-medium text-[0.8125rem] text-[var(--text-muted)]'>{title}</p>
       <ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
         {chapters.map((chapter) => (
           <li key={chapter.title}>
@@ -61,12 +56,11 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
                   new CustomEvent('academy:seek', { detail: { time: parseTime(chapter.time) } })
                 )
               }}
-              className='flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-2 text-left text-[var(--text-secondary)] text-sm transition-colors hover:bg-[var(--surface-active)] disabled:cursor-default disabled:hover:bg-transparent'
+              className='flex w-full cursor-pointer items-baseline gap-3 rounded-lg px-2.5 py-2 text-left text-[var(--text-secondary)] text-sm transition-colors hover:bg-[var(--surface-active)] disabled:cursor-default disabled:hover:bg-transparent'
             >
-              <CirclePlay className='mt-0.5 size-4 shrink-0' />
               <span className='min-w-0 flex-1 break-words'>{chapter.title}</span>
               {chapter.time && (
-                <span className='mt-0.5 shrink-0 text-[var(--text-muted)] text-xs tabular-nums'>
+                <span className='shrink-0 text-[var(--text-muted)] text-xs tabular-nums'>
                   {chapter.time}
                 </span>
               )}

apps/docs/components/ui/what-you-will-learn.tsx

@@ -10,22 +10,22 @@ interface WhatYouWillLearnProps {
   className?: string
 }
 
-/** A bordered "What you will learn" card listing lesson takeaways. */
+/**
+ * "What you will learn" — a flat callout matching the docs' flat/divider
+ * language. A quiet muted label (like the TOC heading) sits above the
+ * takeaways; dividers fall only between items, so the label reads as a marker
+ * rather than an underlined heading and never competes with the item titles.
+ */
 export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
   return (
-    <div
-      className={cn(
-        'not-prose rounded-xl border border-[var(--border-1)] bg-[var(--surface-3)] p-6',
-        className
-      )}
-    >
-      <h2 className='mt-0 mb-5 font-semibold text-[var(--text-primary)] text-xl'>
+    <div className={cn('not-prose', className)}>
+      <p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
         What you will learn
-      </h2>
-      <div className='flex flex-col gap-5'>
+      </p>
+      <div className='divide-y divide-[var(--border)]'>
         {items.map((item) => (
-          <div key={item.title}>
-            <p className='mb-1 font-semibold text-[var(--text-primary)] text-sm'>{item.title}</p>
+          <div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>
+            <p className='mb-1 font-medium text-[var(--text-primary)] text-sm'>{item.title}</p>
             <p className='m-0 text-[var(--text-secondary)] text-sm leading-relaxed'>{item.body}</p>
           </div>
         ))}