chore: use updated error dialog pattern

src/renderer/src/components/error-dialog.tsx

@@ -1,9 +1,8 @@
-import { useState, type MouseEventHandler } from 'react'
+import { useState } from 'react'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import ButtonBase from '@mui/material/ButtonBase'
 import Collapse from '@mui/material/Collapse'
-import Dialog from '@mui/material/Dialog'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { alpha } from '@mui/material/styles'
@@ -12,119 +11,6 @@ import { defineMessages, useIntl } from 'react-intl'
 import { BLUE_GREY, DARK_GREY, LIGHT_GREY } from '../colors.ts'
 import { Icon } from './icon.tsx'
 
-export type Props = {
-	errorMessage?: string
-	onClose: MouseEventHandler<HTMLButtonElement>
-	open: boolean
-}
-
-/**
- * @deprecated Use `DecentDialog` with `ErrorDialogContent`
- */
-export function ErrorDialog({ errorMessage, onClose, open }: Props) {
-	const { formatMessage: t } = useIntl()
-
-	const [advancedExpanded, setAdvancedExpanded] = useState(false)
-
-	return (
-		<Dialog open={open} maxWidth="sm">
-			<Stack direction="column">
-				<Stack direction="column" gap={10} flex={1} padding={20}>
-					<Stack direction="column" alignItems="center" gap={4}>
-						<Icon name="material-error" color="error" size={72} />
-
-						<Typography variant="h1" fontWeight={500} textAlign="center">
-							{t(m.somethingWentWrong)}
-						</Typography>
-					</Stack>
-
-					{errorMessage ? (
-						<Stack direction="column" flex={1} gap={2}>
-							<ButtonBase
-								disableRipple
-								onClick={() => {
-									setAdvancedExpanded((prev) => !prev)
-								}}
-								sx={{
-									':hover, :focus': {
-										backgroundColor: alpha(BLUE_GREY, 0.2),
-										transition: (theme) =>
-											theme.transitions.create('background-color'),
-									},
-									padding: 2,
-									borderRadius: 2,
-								}}
-							>
-								<Stack
-									direction="row"
-									flex={1}
-									justifyContent={'space-between'}
-									sx={{
-										'&::marker': {
-											content: 'none',
-										},
-									}}
-								>
-									<Typography color="textSecondary">{t(m.advanced)}</Typography>
-									<Icon
-										name={
-											advancedExpanded
-												? 'material-expand-less'
-												: 'material-expand-more'
-										}
-										htmlColor={DARK_GREY}
-									/>
-								</Stack>
-							</ButtonBase>
-
-							<Collapse in={advancedExpanded}>
-								<Box
-									bgcolor={LIGHT_GREY}
-									padding={4}
-									border={`1px solid ${BLUE_GREY}`}
-									maxHeight={300}
-									overflow="auto"
-									borderRadius={2}
-								>
-									<Typography
-										component="pre"
-										variant="body2"
-										fontFamily="monospace"
-										whiteSpace="pre-wrap"
-										sx={{ overflowWrap: 'break-word' }}
-									>
-										{errorMessage}
-									</Typography>
-								</Box>
-							</Collapse>
-						</Stack>
-					) : null}
-				</Stack>
-
-				<Box
-					position="sticky"
-					bottom={0}
-					display="flex"
-					justifyContent="center"
-					padding={6}
-				>
-					<Button
-						fullWidth
-						variant="outlined"
-						onClick={(event) => {
-							setAdvancedExpanded(false)
-							onClose(event)
-						}}
-						sx={{ maxWidth: 400, alignSelf: 'center' }}
-					>
-						{t(m.close)}
-					</Button>
-				</Box>
-			</Stack>
-		</Dialog>
-	)
-}
-
 export function ErrorDialogContent({
 	errorMessage,
 	onClose,

src/renderer/src/routes/app/projects/$projectId/_main-tabs/download.tsx

@@ -17,7 +17,8 @@ import { defineMessages, useIntl } from 'react-intl'
 import * as v from 'valibot'
 
 import { BLUE_GREY, DARK_GREY, GREEN } from '../../../../../colors.ts'
-import { ErrorDialog } from '../../../../../components/error-dialog.tsx'
+import { DecentDialog } from '../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../components/error-dialog.tsx'
 import { Icon } from '../../../../../components/icon.tsx'
 import { useAppForm } from '../../../../../hooks/forms.ts'
 import { getLocaleStateQueryOptions } from '../../../../../lib/queries/app-settings.ts'
@@ -384,13 +385,20 @@ function DownloadForm({
 				</Stack>
 			</Stack>
 
-			<ErrorDialog
-				open={downloadData.status === 'error'}
-				errorMessage={downloadData.error?.toString()}
-				onClose={() => {
-					downloadData.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={downloadData.status === 'error' ? downloadData.error : null}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							downloadData.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }

src/renderer/src/routes/app/projects/$projectId/_main-tabs/exchange/index.tsx

@@ -27,7 +27,8 @@ import {
 	DARKER_ORANGE,
 	GREEN,
 } from '../../../../../../colors.ts'
-import { ErrorDialog } from '../../../../../../components/error-dialog.tsx'
+import { DecentDialog } from '../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../components/error-dialog.tsx'
 import { Icon } from '../../../../../../components/icon.tsx'
 import { ButtonLink } from '../../../../../../components/link.tsx'
 import { useIconSizeBasedOnTypography } from '../../../../../../hooks/icon.ts'
@@ -97,25 +98,6 @@ function RouteComponent() {
 	const startSync = useStartSync({ projectId })
 	const stopSync = useStopSync({ projectId })
 
-	const errorDialogProps =
-		startSync.status === 'error'
-			? {
-					open: true,
-					errorMessage: startSync.error.message,
-					onClose: () => {
-						startSync.reset()
-					},
-				}
-			: stopSync.status === 'error'
-				? {
-						open: true,
-						errorMessage: stopSync.error.message,
-						onClose: () => {
-							stopSync.reset()
-						},
-					}
-				: { open: false, onClose: () => {} }
-
 	const connectedPeersCount = syncState
 		? getConnectedPeersCount(syncState.remoteDeviceSyncState)
 		: 0
@@ -282,7 +264,32 @@ function RouteComponent() {
 				}
 			</Stack>
 
-			<ErrorDialog {...errorDialogProps} />
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					startSync.status === 'error'
+						? {
+								errorMessage: startSync.error.toString(),
+								onClose: () => {
+									startSync.reset()
+								},
+							}
+						: stopSync.status === 'error'
+							? {
+									open: true,
+									errorMessage: stopSync.error.toString(),
+									onClose: () => {
+										stopSync.reset()
+									},
+								}
+							: null
+				}
+			>
+				{({ errorMessage, onClose }) => (
+					<ErrorDialogContent errorMessage={errorMessage} onClose={onClose} />
+				)}
+			</DecentDialog>
 		</>
 	)
 }

src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-edit-category-panel.tsx

@@ -20,15 +20,16 @@ import {
 } from '@tanstack/react-query'
 import { defineMessages, useIntl } from 'react-intl'
 
-import { BLUE_GREY } from '../../../../../../../colors'
+import { BLUE_GREY } from '../../../../../../../colors.ts'
 import {
 	CategoryIconContainer,
 	CategoryIconImage,
-} from '../../../../../../../components/category-icon'
-import { ErrorDialog } from '../../../../../../../components/error-dialog'
-import { Icon } from '../../../../../../../components/icon'
-import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings'
-import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations'
+} from '../../../../../../../components/category-icon.tsx'
+import { DecentDialog } from '../../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../../components/error-dialog.tsx'
+import { Icon } from '../../../../../../../components/icon.tsx'
+import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings.ts'
+import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations.ts'
 
 const UPDATE_OBSERVATION_CATEGORY_MUTATION_KEY = createGlobalMutationsKey([
 	'observations',
@@ -266,13 +267,24 @@ function CategoriesList({
 				})}
 			</Box>
 
-			<ErrorDialog
-				open={updateObservationCategory.status === 'error'}
-				errorMessage={updateObservationCategory.error?.toString()}
-				onClose={() => {
-					updateObservationCategory.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					updateObservationCategory.status === 'error'
+						? updateObservationCategory.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							updateObservationCategory.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }