[web] Move PDF dark mode button to the right (#29886)

GitOrigin-RevId: 7f423b2fb4fab61d775bc77351f1cbbc152450d1

services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.tsx

@@ -7,7 +7,6 @@ import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach
 import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
 import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
 import EditorTourLogsTooltip from '../editor-tour/editor-tour-logs-tooltip'
-import { PdfHybridThemeButton } from '@/features/pdf-preview/components/pdf-hybrid-theme-button'
 
 function PdfPreviewHybridToolbar() {
   const { t } = useTranslation()
@@ -30,7 +29,6 @@ function PdfPreviewHybridToolbar() {
         <PdfHybridLogsButton ref={logsButtonRef} />
         <PdfHybridDownloadButton />
         <EditorTourLogsTooltip target={logsButtonElt} />
-        <PdfHybridThemeButton />
       </div>
       <div className="toolbar-pdf-right">
         <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />

services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-theme-button.tsx

@@ -4,11 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import OLIconButton from '@/shared/components/ol/ol-icon-button'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 export const PdfHybridThemeButton = () => {
   const id = useId()
   const { t } = useTranslation()
   const splitTestEnabled = useFeatureFlag('pdf-dark-mode')
+  const usesNewEditor = useIsNewEditorEnabled()
   const {
     pdfViewer,
     darkModePdf,
@@ -21,6 +23,11 @@ export const PdfHybridThemeButton = () => {
     setDarkModePdf(!darkModePdf)
   }, [darkModePdf, setDarkModePdf])
 
+  if (!usesNewEditor) {
+    // The old editor does not support dark mode PDF, so don't show the button
+    return null
+  }
+
   if (!splitTestEnabled) {
     return null
   }

services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx

@@ -9,6 +9,7 @@ import { useDetachCompileContext as useCompileContext } from '../../../shared/co
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
 import { useTranslation } from 'react-i18next'
 import { useLayoutContext } from '@/shared/context/layout-context'
+import { PdfHybridThemeButton } from './pdf-hybrid-theme-button'
 
 type PdfViewerControlsToolbarProps = {
   requestPresentationMode: () => void
@@ -91,7 +92,7 @@ function PdfViewerControlsToolbar({
   }
 
   const InnerControlsComponent =
-    availableWidth >= 300
+    availableWidth >= 320
       ? PdfViewerControlsToolbarFull
       : PdfViewerControlsToolbarSmall
 
@@ -133,6 +134,7 @@ function PdfViewerControlsToolbarFull({
 }: InnerControlsProps) {
   return (
     <>
+      <PdfHybridThemeButton />
       <PdfPageNumberControl
         setPage={setPage}
         page={page}
@@ -161,6 +163,7 @@ function PdfViewerControlsToolbarSmall({
 }: InnerControlsProps) {
   return (
     <div className="pdfjs-viewer-controls-small">
+      <PdfHybridThemeButton />
       <PdfZoomDropdown
         requestPresentationMode={requestPresentationMode}
         rawScale={rawScale}