mirror of
https://github.com/simstudioai/sim.git
synced 2026-10-24 23:06:59 +08:00
Waleed
66315f19e7
* 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.
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
/** Parse a chapter timestamp ("M:SS" or "H:MM:SS") into seconds. */
|
|
function parseTime(time: string): number {
|
|
const parts = time.split(':').map(Number)
|
|
if (parts.some(Number.isNaN)) return 0
|
|
return parts.reduce((acc, n) => acc * 60 + n, 0)
|
|
}
|
|
|
|
interface Chapter {
|
|
/** Chapter label. */
|
|
title: string
|
|
/** Timestamp, e.g. "0:45". */
|
|
time?: string
|
|
}
|
|
|
|
interface VideoChaptersProps {
|
|
/** Panel heading. Defaults to "Chapters". */
|
|
title?: string
|
|
chapters: Chapter[]
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
// Handshake so the rows stay inert (not falsely clickable) on video-less lessons.
|
|
const [hasVideo, setHasVideo] = useState(false)
|
|
useEffect(() => {
|
|
const onReady = () => setHasVideo(true)
|
|
window.addEventListener('academy:video-ready', onReady)
|
|
window.dispatchEvent(new Event('academy:video-query'))
|
|
return () => window.removeEventListener('academy:video-ready', onReady)
|
|
}, [])
|
|
|
|
return (
|
|
<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}>
|
|
<button
|
|
type='button'
|
|
disabled={!hasVideo || chapter.time == null}
|
|
onClick={() => {
|
|
if (chapter.time == null) return
|
|
window.dispatchEvent(
|
|
new CustomEvent('academy:seek', { detail: { time: parseTime(chapter.time) } })
|
|
)
|
|
}}
|
|
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'
|
|
>
|
|
<span className='min-w-0 flex-1 break-words'>{chapter.title}</span>
|
|
{chapter.time && (
|
|
<span className='shrink-0 text-[var(--text-muted)] text-xs tabular-nums'>
|
|
{chapter.time}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</aside>
|
|
)
|
|
}
|