+ This map is larger than this device can export at full size, so the
+ PNG will be {Math.round(previews.scale * 100)}% of native resolution.
+
+ )}
+
)
- const exportButton = (
-
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index de7b9f5..39117b0 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -4,12 +4,14 @@ import { getToolLabel } from '../config/tools'
import type { LegalDocumentId } from '../content/legal'
import type { LayoutMode } from '../hooks/useLayoutMode'
import { useAppStore } from '../store'
+import type { SaveStatus } from '../saveStatus'
import {
ANNOTATION_TEXT_SCALE_MAX,
ANNOTATION_TEXT_SCALE_MIN,
ANNOTATION_TEXT_SCALE_STEP,
} from '../utils/annotationTextScale'
import { stageRef } from '../stageRef'
+import { useSaveState } from '../saveStatus'
import CanvasRotationControl from './CanvasRotationControl'
import LegalModal from './LegalModal'
@@ -17,6 +19,32 @@ const MIN_SCALE = 0.05
const MAX_SCALE = 8
const ZOOM_FACTOR = 1.15
+function SaveIndicator({
+ state,
+}: {
+ state: { status: SaveStatus; savedAt: number | null }
+}) {
+ if (state.status === 'idle') return null
+ const label =
+ state.status === 'error'
+ ? 'Autosave failed'
+ : state.status === 'saved' && state.savedAt
+ ? `Saved ${new Date(state.savedAt).toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit',
+ })}`
+ : 'Saving…'
+ return (
+