Skip to content

Commit 48eae3b

Browse files
ashtonandersonashtonanderson
authored
Merge pull request #253 from CSSLab/codex/analysis-right-column-desktop
Adjust desktop analysis sidebar layout
2 parents dead39a + 5025161 commit 48eae3b

5 files changed

Lines changed: 94 additions & 99 deletions

File tree

‎src/components/Analysis/AnalysisSidebar.tsx‎

Lines changed: 11 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@ import { motion } from 'framer-motion'
1010
import type { DrawShape } from 'chessground/draw'
1111
import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'
1212
import type { ComponentProps, CSSProperties, ReactNode } from 'react'
13-
import { useLocalStorage } from 'src/hooks'
1413
import { useAnalysisController } from 'src/hooks/useAnalysisController'
1514
import type { MaiaEvaluation, StockfishEvaluation } from 'src/types'
16-
17-
type AnalysisViewMode = 'simple' | 'detailed'
1815
type HighlightBoardDescription = ComponentProps<
1916
typeof Highlight
2017
>['boardDescription']
@@ -87,17 +84,8 @@ export const AnalysisSidebar: React.FC<Props> = ({
8784
)
8885

8986
const mockHover = useCallback(() => void 0, [])
90-
const mockSetHoverArrow = useCallback(() => void 0, [])
9187
const mockMakeMove = useCallback(() => void 0, [])
9288

93-
const [analysisViewMode, setAnalysisViewMode] =
94-
useLocalStorage<AnalysisViewMode>('maia-analysis-view-mode', 'simple')
95-
const isSimplifiedView = analysisViewMode !== 'detailed'
96-
97-
const handleToggleViewMode = useCallback(() => {
98-
setAnalysisViewMode(isSimplifiedView ? 'detailed' : 'simple')
99-
}, [isSimplifiedView, setAnalysisViewMode])
100-
10189
const highlightMoveEvaluation = analysisEnabled
10290
? (controller.moveEvaluation as {
10391
maia?: MaiaEvaluation
@@ -132,7 +120,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
132120
colorSanMapping: analysisEnabled ? controller.colorSanMapping : {},
133121
boardDescription: highlightBoardDescription,
134122
currentNode: controller.currentNode ?? undefined,
135-
simplified: isSimplifiedView,
123+
simplified: false,
136124
hideStockfishEvalSummary: hideDetailedBlunderMeter,
137125
hideWhiteWinRateSummary: hideDetailedBlunderMeter,
138126
}
@@ -155,7 +143,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
155143
const moveMapProps = {
156144
moveMap: analysisEnabled ? controller.moveMap : undefined,
157145
colorSanMapping: analysisEnabled ? controller.colorSanMapping : {},
158-
setHoverArrow: analysisEnabled ? setHoverArrow : mockSetHoverArrow,
146+
setHoverArrow,
159147
makeMove: analysisEnabled ? makeMove : mockMakeMove,
160148
playerToMove: analysisEnabled ? (controller.currentNode?.turn ?? 'w') : 'w',
161149
}
@@ -183,9 +171,6 @@ export const AnalysisSidebar: React.FC<Props> = ({
183171
? 'flex items-center gap-1 rounded-md border border-glass-border bg-glass px-2 py-1 text-xs transition-colors hover:bg-glass-stronger'
184172
: 'flex items-center gap-1 rounded-md border border-glass-border bg-glass px-2 py-1 text-xs transition-colors'
185173

186-
const viewButtonClass = `${buttonBase} ${
187-
isSimplifiedView ? 'text-white' : 'text-white/80'
188-
}`
189174
const visibilityButtonClass = `${buttonBase} ${
190175
analysisEnabled ? 'text-white' : 'text-white/80'
191176
}`
@@ -207,19 +192,6 @@ export const AnalysisSidebar: React.FC<Props> = ({
207192
</h3>
208193
</div>
209194
<div className="flex items-center gap-2">
210-
<button
211-
type="button"
212-
onClick={handleToggleViewMode}
213-
className={viewButtonClass}
214-
aria-pressed={isSimplifiedView}
215-
>
216-
<span className="material-symbols-outlined !text-xs text-white/80">
217-
{isSimplifiedView ? 'expand_all' : 'collapse_all'}
218-
</span>
219-
<span className="text-white/90">
220-
{isSimplifiedView ? 'Expand' : 'Collapse'}
221-
</span>
222-
</button>
223195
<button
224196
type="button"
225197
onClick={handleToggleAnalysis}
@@ -263,45 +235,6 @@ export const AnalysisSidebar: React.FC<Props> = ({
263235
)
264236
}
265237

266-
const simplifiedLayout = (
267-
<>
268-
<div className="hidden xl:flex xl:flex-col xl:gap-3">
269-
<div className="relative flex h-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass-strong backdrop-blur-md">
270-
{renderHeader('desktop')}
271-
<div className="flex h-full w-full flex-1">
272-
<SimplifiedAnalysisOverview
273-
highlightProps={highlightProps}
274-
blunderMeterProps={simplifiedBlunderMeterProps}
275-
analysisEnabled={analysisEnabled}
276-
hideBlunderMeter={hideDetailedBlunderMeter}
277-
/>
278-
</div>
279-
{!analysisEnabled &&
280-
renderDisabledOverlay('Enable analysis to see move evaluations', {
281-
offsetTop: true,
282-
})}
283-
</div>
284-
</div>
285-
<div className="flex h-full flex-col gap-3 xl:hidden">
286-
<div className="relative flex overflow-hidden rounded-md border border-glass-border bg-glass-strong pt-10 backdrop-blur-md">
287-
{renderHeader('mobile', 'absolute left-0 top-0 z-10 w-full')}
288-
<div className="flex h-full w-full flex-col gap-3 p-3">
289-
<SimplifiedAnalysisOverview
290-
highlightProps={highlightProps}
291-
blunderMeterProps={simplifiedBlunderMeterProps}
292-
analysisEnabled={analysisEnabled}
293-
hideBlunderMeter={hideDetailedBlunderMeter}
294-
/>
295-
</div>
296-
{!analysisEnabled &&
297-
renderDisabledOverlay('Enable analysis to see move evaluations', {
298-
offsetTop: true,
299-
})}
300-
</div>
301-
</div>
302-
</>
303-
)
304-
305238
const detailedLayout = (
306239
<>
307240
<div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-3">
@@ -312,12 +245,12 @@ export const AnalysisSidebar: React.FC<Props> = ({
312245
<div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass-strong backdrop-blur-md">
313246
{renderHeader('desktop')}
314247
<div className="flex h-full w-full flex-1">
315-
<div className="flex h-full w-auto min-w-[40%] max-w-[40%] border-r border-glass-border">
316-
<Highlight {...highlightProps} />
317-
</div>
318-
<div className="flex h-full w-full">
319-
<MovesByRating {...movesByRatingProps} />
320-
</div>
248+
<SimplifiedAnalysisOverview
249+
highlightProps={{ ...highlightProps, simplified: true }}
250+
blunderMeterProps={simplifiedBlunderMeterProps}
251+
analysisEnabled={analysisEnabled}
252+
hideBlunderMeter={hideDetailedBlunderMeter}
253+
/>
321254
</div>
322255
</div>
323256
{!analysisEnabled &&
@@ -330,8 +263,8 @@ export const AnalysisSidebar: React.FC<Props> = ({
330263
className="desktop-analysis-big-row-2-container relative flex flex-row gap-3"
331264
style={{ height: `calc((${desktopContentHeightCss} - 0.75rem) / 2)` }}
332265
>
333-
<div className="flex h-full w-full flex-col">
334-
<MoveMap {...moveMapProps} />
266+
<div className="relative flex h-full w-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass backdrop-blur-md">
267+
<MovesByRating {...movesByRatingProps} />
335268
</div>
336269
{!hideDetailedBlunderMeter && <BlunderMeter {...blunderMeterProps} />}
337270
{!analysisEnabled &&
@@ -384,9 +317,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
384317
className="desktop-right-column-container flex flex-col gap-3"
385318
style={{ willChange: 'transform, opacity', ...containerStyle }}
386319
>
387-
<div className="min-h-0 flex-1">
388-
{isSimplifiedView ? simplifiedLayout : detailedLayout}
389-
</div>
320+
<div className="min-h-0 flex-1">{detailedLayout}</div>
390321
{footerContent ? <div className="shrink-0">{footerContent}</div> : null}
391322
</motion.div>
392323
)

‎src/components/Analysis/Highlight.tsx‎

Lines changed: 69 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -354,9 +354,14 @@ export const Highlight: React.FC<Props> = ({
354354
}
355355
}, [boardDescription?.segments?.length])
356356

357-
const useCompactMobileColumnTitles = isMobile && !simplified
357+
const useCompactMobileColumnTitles = isMobile || simplified
358358
const mobileMaiaColumnTitle = `Maia ${currentMaiaModel.slice(-4)}: Human Moves`
359359
const mobileStockfishColumnTitle = 'SF 17: Engine Moves'
360+
const compactTitleRowClass = 'grid h-11 place-items-center'
361+
const splitTitleRowClass = 'grid h-12 place-items-center'
362+
const compactTitleTextClass = 'text-sm font-semibold leading-none'
363+
const splitTitleTextClass =
364+
'text-sm font-semibold leading-none md:text-xxs lg:text-xs'
360365
const stockfishDepth = moveEvaluation?.stockfish?.depth
361366
const stockfishDepthLabel = stockfishDepth ? `d${stockfishDepth}` : null
362367
const openMaiaHeaderPicker = () => {
@@ -387,23 +392,41 @@ export const Highlight: React.FC<Props> = ({
387392
simplified ? 'grid-cols-1' : ''
388393
}`}
389394
>
390-
<div className="flex flex-col items-center justify-start gap-0.5 border-r border-glass-border xl:gap-1">
391-
<div className="relative flex w-full flex-col border-b border-white/5">
395+
<div
396+
className={`flex flex-col items-center justify-start border-r border-glass-border ${
397+
simplified ? 'gap-0' : 'gap-0.5 xl:gap-1'
398+
}`}
399+
>
400+
<div
401+
className={`relative w-full border-b border-white/5 ${
402+
useCompactMobileColumnTitles
403+
? compactTitleRowClass
404+
: splitTitleRowClass
405+
}`}
406+
>
392407
{isHomePage ? (
393-
<div className="py-2 text-center text-sm font-semibold text-human-1 md:text-xxs lg:text-xs">
408+
<div
409+
className={`text-center text-human-1 ${
410+
useCompactMobileColumnTitles
411+
? compactTitleTextClass
412+
: splitTitleTextClass
413+
}`}
414+
>
394415
{useCompactMobileColumnTitles
395416
? mobileMaiaColumnTitle
396417
: `Maia ${currentMaiaModel.slice(-4)}`}
397418
</div>
398419
) : (
399420
<>
400421
{useCompactMobileColumnTitles ? (
401-
<div className="flex items-center justify-center py-2 pr-4 text-sm font-semibold text-human-1">
422+
<div
423+
className={`flex items-center justify-center pr-4 text-human-1 ${compactTitleTextClass}`}
424+
>
402425
<select
403426
ref={maiaHeaderSelectRef}
404427
value={currentMaiaModel}
405428
onChange={(e) => setCurrentMaiaModel(e.target.value)}
406-
className="cursor-pointer appearance-none bg-transparent text-center outline-none transition-colors duration-200 hover:text-human-1/80"
429+
className="pointer-events-none absolute inset-0 h-full w-full appearance-none opacity-0"
407430
>
408431
{MAIA_MODELS.map((model) => (
409432
<option
@@ -415,16 +438,16 @@ export const Highlight: React.FC<Props> = ({
415438
</option>
416439
))}
417440
</select>
418-
<span className="ml-0.5 whitespace-nowrap">
419-
: Human Moves
441+
<span className="whitespace-nowrap leading-none">
442+
{mobileMaiaColumnTitle}
420443
</span>
421444
</div>
422445
) : (
423446
<select
424447
ref={maiaHeaderSelectRef}
425448
value={currentMaiaModel}
426449
onChange={(e) => setCurrentMaiaModel(e.target.value)}
427-
className="cursor-pointer appearance-none bg-transparent py-2 text-center text-sm font-semibold text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80 md:text-xxs lg:text-xs"
450+
className={`cursor-pointer appearance-none bg-transparent text-center ${splitTitleTextClass} text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80`}
428451
>
429452
{MAIA_MODELS.map((model) => (
430453
<option
@@ -473,11 +496,17 @@ export const Highlight: React.FC<Props> = ({
473496
)}
474497

475498
<div
476-
className={`flex w-full flex-col items-start justify-center md:items-center ${simplified ? 'p-3' : 'px-2 py-1.5 xl:py-2'}`}
499+
className={`flex w-full flex-col items-start justify-start md:items-center ${
500+
simplified ? 'px-3 pb-2 pt-1.5' : 'px-2 py-1.5 xl:py-2'
501+
}`}
477502
>
478503
{!useCompactMobileColumnTitles && (
479504
<p
480-
className={`mb-1 whitespace-nowrap text-sm font-semibold text-human-2 ${simplified ? 'text-sm' : 'md:text-xxs lg:text-xs'}`}
505+
className={`whitespace-nowrap text-sm font-semibold text-human-2 ${
506+
simplified
507+
? 'mb-0.5 text-sm leading-tight'
508+
: 'mb-1 md:text-xxs lg:text-xs'
509+
}`}
481510
>
482511
Human Moves
483512
</p>
@@ -524,16 +553,32 @@ export const Highlight: React.FC<Props> = ({
524553
})}
525554
</div>
526555
</div>
527-
<div className="flex flex-col items-center justify-start gap-0.5 xl:gap-1">
528-
<div className="flex w-full flex-col border-b border-white/5 py-2">
529-
<p className="flex items-baseline justify-center gap-1 whitespace-nowrap text-center text-sm font-semibold text-engine-1 md:text-xxs lg:text-xs">
530-
<span>
556+
<div
557+
className={`flex flex-col items-center justify-start ${
558+
simplified ? 'gap-0' : 'gap-0.5 xl:gap-1'
559+
}`}
560+
>
561+
<div
562+
className={`w-full border-b border-white/5 ${
563+
useCompactMobileColumnTitles
564+
? compactTitleRowClass
565+
: splitTitleRowClass
566+
}`}
567+
>
568+
<p
569+
className={`flex items-center justify-center gap-1 whitespace-nowrap text-center text-engine-1 ${
570+
useCompactMobileColumnTitles
571+
? compactTitleTextClass
572+
: splitTitleTextClass
573+
}`}
574+
>
575+
<span className="leading-none">
531576
{useCompactMobileColumnTitles
532577
? mobileStockfishColumnTitle
533578
: 'Stockfish 17'}
534579
</span>
535580
{stockfishDepthLabel && (
536-
<span className="text-[10px] font-normal text-engine-2/75 md:text-[9px] lg:text-[10px]">
581+
<span className="text-[10px] font-normal leading-none text-engine-2/75 md:text-[9px] lg:text-[10px]">
537582
{stockfishDepthLabel}
538583
</span>
539584
)}
@@ -554,11 +599,17 @@ export const Highlight: React.FC<Props> = ({
554599
)}
555600

556601
<div
557-
className={`flex w-full flex-col items-start justify-center ${simplified ? 'p-3' : 'px-2 py-1.5 xl:py-2'} md:items-center`}
602+
className={`flex w-full flex-col items-start justify-start md:items-center ${
603+
simplified ? 'px-3 pb-2 pt-1.5' : 'px-2 py-1.5 xl:py-2'
604+
}`}
558605
>
559606
{!useCompactMobileColumnTitles && (
560607
<p
561-
className={`mb-1 whitespace-nowrap text-sm font-semibold text-engine-2 ${simplified ? 'text-sm' : 'md:text-xxs lg:text-xs'}`}
608+
className={`whitespace-nowrap text-sm font-semibold text-engine-2 ${
609+
simplified
610+
? 'mb-0.5 text-sm leading-tight'
611+
: 'mb-1 md:text-xxs lg:text-xs'
612+
}`}
562613
>
563614
Engine Moves
564615
</p>

‎src/lib/posthog.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// This package is server-only and not always present in local type resolution.
2+
// eslint-disable-next-line import/no-unresolved
13
import { PostHog } from 'posthog-node'
24

35
// NOTE: This is a Node.js client for sending events from the server side to PostHog.

‎src/pages/analysis/[...id].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1199,7 +1199,7 @@ const Analysis: React.FC<Props> = ({
11991199
() => `calc(max(24rem, ${desktopBoardSizeCss}))`,
12001200
[desktopBoardSizeCss],
12011201
)
1202-
const desktopConfigPanelHeightCss = '12.5rem'
1202+
const desktopConfigPanelHeightCss = '9.5rem'
12031203
const desktopSidebarContentHeightCss = `calc(${desktopColumnTargetHeightCss} - ${desktopConfigPanelHeightCss} - 0.75rem)`
12041204
const desktopBarChromeSize: 'compact' | 'expanded' =
12051205
width >= 1360 ? 'expanded' : 'compact'

‎src/types/posthog-node.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
declare module 'posthog-node' {
2+
export interface PostHogOptions {
3+
host?: string
4+
flushAt?: number
5+
flushInterval?: number
6+
}
7+
8+
export class PostHog {
9+
constructor(apiKey: string, options?: PostHogOptions)
10+
}
11+
}

0 commit comments

Comments
 (0)