Files
Verso/services/web/frontend/js/features/ide-react/components/toolbar/toolbar.tsx
T
claudeandClaude Opus 4.8 59055aa67e
Build and Deploy Verso / deploy (push) Successful in 7m53s
Publish presentations: share-modal section + Preview button (UI)
Wires the two entry points to the publishing backend:

- Share dialog: a "Share compiled presentation" section (owner only) with a
  public / logged-in-users-only choice, Publish/Unpublish, and a copyable link.
- Top-right toolbar: a "Preview" button that publishes a private (logged-in-
  users-only) link in one click and opens the standalone deck in a new tab
  (opened synchronously to dodge popup blockers).

Both talk to /project/:id/publish-presentation. Reuses existing i18n
(publish/unpublish/copy/preview); adds share_compiled_presentation(_info) and
presentation_link_public/private.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-01 14:39:39 +00:00

70 lines
2.8 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import { ToolbarMenuBar } from './menu-bar'
import { ToolbarProjectTitle } from './project-title'
import { OnlineUsers } from './online-users'
import ShareProjectButton from './share-project-button'
import PresentationPreviewButton from './presentation-preview-button'
import ChangeLayoutButton from './change-layout-button'
import ShowHistoryButton from './show-history-button'
import { useLayoutContext } from '@/shared/context/layout-context'
import BackToEditorButton from '@/features/editor-navigation-toolbar/components/back-to-editor-button'
import { useCallback } from 'react'
import * as eventTracking from '../../../../infrastructure/event-tracking'
import { ToolbarLogos } from './logos'
import { useEditorContext } from '@/shared/context/editor-context'
import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
import UpgradeButton from './upgrade-button'
import getMeta from '@/utils/meta'
import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
const [publishModalModules] = importOverleafModules('publishModal')
const SubmitProjectButton = publishModalModules?.import.NewPublishToolbarButton
export const Toolbar = () => {
const { view, restoreView } = useLayoutContext()
const { cobranding, isRestrictedTokenMember } = useEditorContext()
const { permissionsLevel } = useIdeReactContext()
const { t } = useTranslation()
const shouldDisplaySubmitButton =
(permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite') &&
SubmitProjectButton
const handleBackToEditorClick = useCallback(() => {
eventTracking.sendMB('navigation-clicked-history', { action: 'close' })
restoreView()
}, [restoreView])
if (view === 'history') {
return (
<nav className="ide-redesign-toolbar" aria-label={t('project_actions')}>
<div className="d-flex align-items-center">
<BackToEditorButton onClick={handleBackToEditorClick} />
</div>
<ToolbarProjectTitle />
<div /> {/* Empty div used for spacing */}
</nav>
)
}
return (
<nav className="ide-redesign-toolbar" aria-label={t('project_actions')}>
<div className="ide-redesign-toolbar-menu">
<ToolbarLogos cobranding={cobranding} />
<ToolbarMenuBar />
</div>
<ToolbarProjectTitle />
<div className="ide-redesign-toolbar-actions">
<OnlineUsers />
{!isRestrictedTokenMember && <ShowHistoryButton />}
<ChangeLayoutButton />
{shouldDisplaySubmitButton && cobranding && (
<SubmitProjectButton cobranding={cobranding} />
)}
<PresentationPreviewButton />
<ShareProjectButton />
{getMeta('ol-showUpgradePrompt') && <UpgradeButton />}
</div>
</nav>
)
}