claudeandClaude Opus 4.8
4fc86ebd3d
Build and Deploy Verso / deploy (push) Successful in 9m48s
- Add a Typst language (stream highlighting + completions) for .typ, and Quarto completions (code chunks, callouts, cross-refs) for .qmd/markdown. - Project dashboard: new Format column (Quarto/Typst/LaTeX) from the cheap project compiler field, surfaced through the projects list API. - Compiler dropdown: grey out engines that don't match the root file's extension (.qmd->Quarto, .typ->Typst, .tex->LaTeX engines). - Replace the Overleaf fill loader with an animated Verso logo: the four quadrant circles drift on their own orbits while colour warms up with load progress; reused on the token-access screen too. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { FC } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import InviteNotValid from '@/features/share-project/invite-not-valid'
|
|
import getMeta from '@/utils/meta'
|
|
import { useFeatureFlag } from '@/shared/context/split-test-context'
|
|
import LoadingBranded from '@/shared/components/loading-branded'
|
|
|
|
export const AccessAttemptScreen: FC<{
|
|
loadingScreenBrandHeight: string
|
|
inflight: boolean
|
|
accessError: string | boolean
|
|
}> = ({ loadingScreenBrandHeight, inflight, accessError }) => {
|
|
const { t } = useTranslation()
|
|
const user = getMeta('ol-user')
|
|
const isSharingUpdatesEnabled = useFeatureFlag('sharing-updates')
|
|
// The brand height is a "% filled" string (e.g. "20%") driven by request
|
|
// progress; map it to the Verso loader's colour-reveal saturation.
|
|
const brandProgress = loadingScreenBrandHeight.endsWith('%')
|
|
? parseFloat(loadingScreenBrandHeight)
|
|
: 0
|
|
|
|
if (isSharingUpdatesEnabled) {
|
|
if (accessError) {
|
|
return <InviteNotValid email={user?.email} />
|
|
}
|
|
|
|
return (
|
|
<div className="vertically-centered-content">
|
|
<div className="loading-screen">
|
|
<LoadingBranded loadProgress={brandProgress} hasError />
|
|
|
|
<h3 className="loading-screen-label text-center">
|
|
{t('join_project')}
|
|
{inflight && <LoadingScreenEllipses />}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="loading-screen">
|
|
<LoadingBranded loadProgress={brandProgress} hasError />
|
|
|
|
<h3 className="loading-screen-label text-center">
|
|
{t('join_project')}
|
|
{inflight && <LoadingScreenEllipses />}
|
|
</h3>
|
|
|
|
{accessError && (
|
|
<div className="global-alerts text-center">
|
|
<div>
|
|
<br />
|
|
{accessError === 'not_found' ? (
|
|
<div>
|
|
<h4 aria-live="assertive">Project not found</h4>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className="alert alert-danger" aria-live="assertive">
|
|
{t('token_access_failure')}
|
|
</div>
|
|
<p>
|
|
<a href="/">{t('home')}</a>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
const LoadingScreenEllipses = () => (
|
|
<span aria-hidden>
|
|
<span className="loading-screen-ellip">.</span>
|
|
<span className="loading-screen-ellip">.</span>
|
|
<span className="loading-screen-ellip">.</span>
|
|
</span>
|
|
)
|