Adjust desktop analysis sidebar layout

Author: ashtonanderson

src/components/Analysis/AnalysisSidebar.tsx

@@ -10,11 +10,8 @@ import { motion } from 'framer-motion'
 import type { DrawShape } from 'chessground/draw'
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'
 import type { ComponentProps, CSSProperties, ReactNode } from 'react'
-import { useLocalStorage } from 'src/hooks'
 import { useAnalysisController } from 'src/hooks/useAnalysisController'
 import type { MaiaEvaluation, StockfishEvaluation } from 'src/types'
-
-type AnalysisViewMode = 'simple' | 'detailed'
 type HighlightBoardDescription = ComponentProps<
   typeof Highlight
 >['boardDescription']
@@ -87,17 +84,8 @@ export const AnalysisSidebar: React.FC<Props> = ({
   )
 
   const mockHover = useCallback(() => void 0, [])
-  const mockSetHoverArrow = useCallback(() => void 0, [])
   const mockMakeMove = useCallback(() => void 0, [])
 
-  const [analysisViewMode, setAnalysisViewMode] =
-    useLocalStorage<AnalysisViewMode>('maia-analysis-view-mode', 'simple')
-  const isSimplifiedView = analysisViewMode !== 'detailed'
-
-  const handleToggleViewMode = useCallback(() => {
-    setAnalysisViewMode(isSimplifiedView ? 'detailed' : 'simple')
-  }, [isSimplifiedView, setAnalysisViewMode])
-
   const highlightMoveEvaluation = analysisEnabled
     ? (controller.moveEvaluation as {
         maia?: MaiaEvaluation
@@ -132,7 +120,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
     colorSanMapping: analysisEnabled ? controller.colorSanMapping : {},
     boardDescription: highlightBoardDescription,
     currentNode: controller.currentNode ?? undefined,
-    simplified: isSimplifiedView,
+    simplified: false,
     hideStockfishEvalSummary: hideDetailedBlunderMeter,
     hideWhiteWinRateSummary: hideDetailedBlunderMeter,
   }
@@ -155,7 +143,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
   const moveMapProps = {
     moveMap: analysisEnabled ? controller.moveMap : undefined,
     colorSanMapping: analysisEnabled ? controller.colorSanMapping : {},
-    setHoverArrow: analysisEnabled ? setHoverArrow : mockSetHoverArrow,
+    setHoverArrow,
     makeMove: analysisEnabled ? makeMove : mockMakeMove,
     playerToMove: analysisEnabled ? (controller.currentNode?.turn ?? 'w') : 'w',
   }
@@ -183,9 +171,6 @@ export const AnalysisSidebar: React.FC<Props> = ({
         ? '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'
         : 'flex items-center gap-1 rounded-md border border-glass-border bg-glass px-2 py-1 text-xs transition-colors'
 
-    const viewButtonClass = `${buttonBase} ${
-      isSimplifiedView ? 'text-white' : 'text-white/80'
-    }`
     const visibilityButtonClass = `${buttonBase} ${
       analysisEnabled ? 'text-white' : 'text-white/80'
     }`
@@ -207,19 +192,6 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </h3>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={handleToggleViewMode}
-            className={viewButtonClass}
-            aria-pressed={isSimplifiedView}
-          >
-            <span className="material-symbols-outlined !text-xs text-white/80">
-              {isSimplifiedView ? 'expand_all' : 'collapse_all'}
-            </span>
-            <span className="text-white/90">
-              {isSimplifiedView ? 'Expand' : 'Collapse'}
-            </span>
-          </button>
           <button
             type="button"
             onClick={handleToggleAnalysis}
@@ -263,45 +235,6 @@ export const AnalysisSidebar: React.FC<Props> = ({
     )
   }
 
-  const simplifiedLayout = (
-    <>
-      <div className="hidden xl:flex xl:flex-col xl:gap-3">
-        <div className="relative flex h-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass-strong backdrop-blur-md">
-          {renderHeader('desktop')}
-          <div className="flex h-full w-full flex-1">
-            <SimplifiedAnalysisOverview
-              highlightProps={highlightProps}
-              blunderMeterProps={simplifiedBlunderMeterProps}
-              analysisEnabled={analysisEnabled}
-              hideBlunderMeter={hideDetailedBlunderMeter}
-            />
-          </div>
-          {!analysisEnabled &&
-            renderDisabledOverlay('Enable analysis to see move evaluations', {
-              offsetTop: true,
-            })}
-        </div>
-      </div>
-      <div className="flex h-full flex-col gap-3 xl:hidden">
-        <div className="relative flex overflow-hidden rounded-md border border-glass-border bg-glass-strong pt-10 backdrop-blur-md">
-          {renderHeader('mobile', 'absolute left-0 top-0 z-10 w-full')}
-          <div className="flex h-full w-full flex-col gap-3 p-3">
-            <SimplifiedAnalysisOverview
-              highlightProps={highlightProps}
-              blunderMeterProps={simplifiedBlunderMeterProps}
-              analysisEnabled={analysisEnabled}
-              hideBlunderMeter={hideDetailedBlunderMeter}
-            />
-          </div>
-          {!analysisEnabled &&
-            renderDisabledOverlay('Enable analysis to see move evaluations', {
-              offsetTop: true,
-            })}
-        </div>
-      </div>
-    </>
-  )
-
   const detailedLayout = (
     <>
       <div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-3">
@@ -312,12 +245,12 @@ export const AnalysisSidebar: React.FC<Props> = ({
           <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass-strong backdrop-blur-md">
             {renderHeader('desktop')}
             <div className="flex h-full w-full flex-1">
-              <div className="flex h-full w-auto min-w-[40%] max-w-[40%] border-r border-glass-border">
-                <Highlight {...highlightProps} />
-              </div>
-              <div className="flex h-full w-full">
-                <MovesByRating {...movesByRatingProps} />
-              </div>
+              <SimplifiedAnalysisOverview
+                highlightProps={{ ...highlightProps, simplified: true }}
+                blunderMeterProps={simplifiedBlunderMeterProps}
+                analysisEnabled={analysisEnabled}
+                hideBlunderMeter={hideDetailedBlunderMeter}
+              />
             </div>
           </div>
           {!analysisEnabled &&
@@ -330,8 +263,8 @@ export const AnalysisSidebar: React.FC<Props> = ({
           className="desktop-analysis-big-row-2-container relative flex flex-row gap-3"
           style={{ height: `calc((${desktopContentHeightCss} - 0.75rem) / 2)` }}
         >
-          <div className="flex h-full w-full flex-col">
-            <MoveMap {...moveMapProps} />
+          <div className="relative flex h-full w-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass backdrop-blur-md">
+            <MovesByRating {...movesByRatingProps} />
           </div>
           {!hideDetailedBlunderMeter && <BlunderMeter {...blunderMeterProps} />}
           {!analysisEnabled &&
@@ -384,9 +317,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
       className="desktop-right-column-container flex flex-col gap-3"
       style={{ willChange: 'transform, opacity', ...containerStyle }}
     >
-      <div className="min-h-0 flex-1">
-        {isSimplifiedView ? simplifiedLayout : detailedLayout}
-      </div>
+      <div className="min-h-0 flex-1">{detailedLayout}</div>
       {footerContent ? <div className="shrink-0">{footerContent}</div> : null}
     </motion.div>
   )

src/components/Analysis/Highlight.tsx

@@ -354,9 +354,13 @@ export const Highlight: React.FC<Props> = ({
     }
   }, [boardDescription?.segments?.length])
 
-  const useCompactMobileColumnTitles = isMobile && !simplified
+  const useCompactMobileColumnTitles = isMobile || simplified
   const mobileMaiaColumnTitle = `Maia ${currentMaiaModel.slice(-4)}: Human Moves`
   const mobileStockfishColumnTitle = 'SF 17: Engine Moves'
+  const compactTitleRowClass = 'grid h-11 place-items-center'
+  const splitTitleRowClass = 'grid h-12 place-items-center'
+  const compactTitleTextClass = 'text-sm font-semibold leading-none'
+  const splitTitleTextClass = 'text-sm font-semibold leading-none md:text-xxs lg:text-xs'
   const stockfishDepth = moveEvaluation?.stockfish?.depth
   const stockfishDepthLabel = stockfishDepth ? `d${stockfishDepth}` : null
   const openMaiaHeaderPicker = () => {
@@ -387,23 +391,39 @@ export const Highlight: React.FC<Props> = ({
           simplified ? 'grid-cols-1' : ''
         }`}
       >
-        <div className="flex flex-col items-center justify-start gap-0.5 border-r border-glass-border xl:gap-1">
-          <div className="relative flex w-full flex-col border-b border-white/5">
+        <div
+          className={`flex flex-col items-center justify-start border-r border-glass-border ${
+            simplified ? 'gap-0' : 'gap-0.5 xl:gap-1'
+          }`}
+        >
+          <div
+            className={`relative w-full border-b border-white/5 ${
+              useCompactMobileColumnTitles ? compactTitleRowClass : splitTitleRowClass
+            }`}
+          >
             {isHomePage ? (
-              <div className="py-2 text-center text-sm font-semibold text-human-1 md:text-xxs lg:text-xs">
+              <div
+                className={`text-center text-human-1 ${
+                  useCompactMobileColumnTitles
+                    ? compactTitleTextClass
+                    : splitTitleTextClass
+                }`}
+              >
                 {useCompactMobileColumnTitles
                   ? mobileMaiaColumnTitle
                   : `Maia ${currentMaiaModel.slice(-4)}`}
               </div>
             ) : (
               <>
                 {useCompactMobileColumnTitles ? (
-                  <div className="flex items-center justify-center py-2 pr-4 text-sm font-semibold text-human-1">
+                  <div
+                    className={`flex items-center justify-center pr-4 text-human-1 ${compactTitleTextClass}`}
+                  >
                     <select
                       ref={maiaHeaderSelectRef}
                       value={currentMaiaModel}
                       onChange={(e) => setCurrentMaiaModel(e.target.value)}
-                      className="cursor-pointer appearance-none bg-transparent text-center outline-none transition-colors duration-200 hover:text-human-1/80"
+                      className="pointer-events-none absolute inset-0 h-full w-full appearance-none opacity-0"
                     >
                       {MAIA_MODELS.map((model) => (
                         <option
@@ -415,16 +435,16 @@ export const Highlight: React.FC<Props> = ({
                         </option>
                       ))}
                     </select>
-                    <span className="ml-0.5 whitespace-nowrap">
-                      : Human Moves
+                    <span className="whitespace-nowrap leading-none">
+                      {mobileMaiaColumnTitle}
                     </span>
                   </div>
                 ) : (
                   <select
                     ref={maiaHeaderSelectRef}
                     value={currentMaiaModel}
                     onChange={(e) => setCurrentMaiaModel(e.target.value)}
-                    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"
+                    className={`cursor-pointer appearance-none bg-transparent text-center ${splitTitleTextClass} text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80`}
                   >
                     {MAIA_MODELS.map((model) => (
                       <option
@@ -473,11 +493,15 @@ export const Highlight: React.FC<Props> = ({
           )}
 
           <div
-            className={`flex w-full flex-col items-start justify-center md:items-center ${simplified ? 'p-3' : 'px-2 py-1.5 xl:py-2'}`}
+            className={`flex w-full flex-col items-start justify-start md:items-center ${
+              simplified ? 'px-3 pb-2 pt-1.5' : 'px-2 py-1.5 xl:py-2'
+            }`}
           >
             {!useCompactMobileColumnTitles && (
               <p
-                className={`mb-1 whitespace-nowrap text-sm font-semibold text-human-2 ${simplified ? 'text-sm' : 'md:text-xxs lg:text-xs'}`}
+                className={`whitespace-nowrap text-sm font-semibold text-human-2 ${
+                  simplified ? 'mb-0.5 text-sm leading-tight' : 'mb-1 md:text-xxs lg:text-xs'
+                }`}
               >
                 Human Moves
               </p>
@@ -524,16 +548,30 @@ export const Highlight: React.FC<Props> = ({
             })}
           </div>
         </div>
-        <div className="flex flex-col items-center justify-start gap-0.5 xl:gap-1">
-          <div className="flex w-full flex-col border-b border-white/5 py-2">
-            <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">
-              <span>
+        <div
+          className={`flex flex-col items-center justify-start ${
+            simplified ? 'gap-0' : 'gap-0.5 xl:gap-1'
+          }`}
+        >
+          <div
+            className={`w-full border-b border-white/5 ${
+              useCompactMobileColumnTitles ? compactTitleRowClass : splitTitleRowClass
+            }`}
+          >
+            <p
+              className={`flex items-center justify-center gap-1 whitespace-nowrap text-center text-engine-1 ${
+                useCompactMobileColumnTitles
+                  ? compactTitleTextClass
+                  : splitTitleTextClass
+              }`}
+            >
+              <span className="leading-none">
                 {useCompactMobileColumnTitles
                   ? mobileStockfishColumnTitle
                   : 'Stockfish 17'}
               </span>
               {stockfishDepthLabel && (
-                <span className="text-[10px] font-normal text-engine-2/75 md:text-[9px] lg:text-[10px]">
+                <span className="leading-none text-[10px] font-normal text-engine-2/75 md:text-[9px] lg:text-[10px]">
                   {stockfishDepthLabel}
                 </span>
               )}
@@ -554,11 +592,15 @@ export const Highlight: React.FC<Props> = ({
           )}
 
           <div
-            className={`flex w-full flex-col items-start justify-center ${simplified ? 'p-3' : 'px-2 py-1.5 xl:py-2'} md:items-center`}
+            className={`flex w-full flex-col items-start justify-start md:items-center ${
+              simplified ? 'px-3 pb-2 pt-1.5' : 'px-2 py-1.5 xl:py-2'
+            }`}
           >
             {!useCompactMobileColumnTitles && (
               <p
-                className={`mb-1 whitespace-nowrap text-sm font-semibold text-engine-2 ${simplified ? 'text-sm' : 'md:text-xxs lg:text-xs'}`}
+                className={`whitespace-nowrap text-sm font-semibold text-engine-2 ${
+                  simplified ? 'mb-0.5 text-sm leading-tight' : 'mb-1 md:text-xxs lg:text-xs'
+                }`}
               >
                 Engine Moves
               </p>

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

@@ -1199,7 +1199,7 @@ const Analysis: React.FC<Props> = ({
     () => `calc(max(24rem, ${desktopBoardSizeCss}))`,
     [desktopBoardSizeCss],
   )
-  const desktopConfigPanelHeightCss = '12.5rem'
+  const desktopConfigPanelHeightCss = '9.5rem'
   const desktopSidebarContentHeightCss = `calc(${desktopColumnTargetHeightCss} - ${desktopConfigPanelHeightCss} - 0.75rem)`
   const desktopBarChromeSize: 'compact' | 'expanded' =
     width >= 1360 ? 'expanded' : 'compact'