feat: add ability to edit observation notes

messages/renderer/en.json

@@ -253,6 +253,30 @@
     "description": "Fallback name for observation without a matching category.",
     "message": "Observation"
   },
+  "routes.app.projects.$projectId.observations.$observationDocId.-notes-section.accessibleNotesInputLabel": {
+    "description": "Accessible label for notes input field.",
+    "message": "Notes"
+  },
+  "routes.app.projects.$projectId.observations.$observationDocId.-notes-section.cancelButtonText": {
+    "description": "Text for cancel button.",
+    "message": "Cancel"
+  },
+  "routes.app.projects.$projectId.observations.$observationDocId.-notes-section.editNotesTooltip": {
+    "description": "Text for tooltip when hovering over notes.",
+    "message": "Click to Edit"
+  },
+  "routes.app.projects.$projectId.observations.$observationDocId.-notes-section.noNotes": {
+    "description": "Text for when notes are empty.",
+    "message": "No notes."
+  },
+  "routes.app.projects.$projectId.observations.$observationDocId.-notes-section.saveButtonText": {
+    "description": "Text for save button.",
+    "message": "Save"
+  },
+  "routes.app.projects.$projectId.observations.$observationDocId.-notes-section.title": {
+    "description": "Title for notes section.",
+    "message": "Notes"
+  },
   "routes.app.projects.$projectId.observations.$observationDocId.index.categoryIconAlt": {
     "description": "Alt text for icon image displayed for category (used for accessibility tools).",
     "message": "Icon for {name} category"
@@ -321,10 +345,6 @@
     "description": "Fallback for location when observation does not have location specified.",
     "message": "No location"
   },
-  "routes.app.projects.$projectId.observations.$observationDocId.index.notesSectionTitle": {
-    "description": "Title for notes section.",
-    "message": "Notes"
-  },
   "routes.app.projects.$projectId.observations.$observationDocId.index.observationCategoryNameFallback": {
     "description": "Fallback name for observation without a matching category.",
     "message": "Observation"

src/renderer/src/app.tsx

@@ -36,6 +36,10 @@ import {
 	ActiveProjectIdStoreProvider,
 	createActiveProjectIdStore,
 } from './contexts/active-project-id-store-context'
+import {
+	GlobalEditingStateStoreProvider,
+	createGlobalEditingStateStore,
+} from './contexts/global-editing-state-store-context'
 import { IntlProvider } from './contexts/intl'
 import {
 	LocalPeersStoreProvider,
@@ -129,6 +133,7 @@ const { platform } = window.runtime.getAppInfo()
 const MAIN_CONTENT_HEIGHT =
 	platform === 'darwin' ? `calc(100% - ${TITLE_BAR_HEIGHT})` : '100%'
 
+const globalEditingStateStore = createGlobalEditingStateStore()
 const refreshTokensStore = createRefreshTokensStore()
 const localPeersStore = createLocalPeersStore({ clientApi })
 const activeProjectIdStore = createActiveProjectIdStore({
@@ -156,53 +161,55 @@ export function App() {
 				<CssBaseline enableColorScheme />
 
 				<RefreshTokensStoreProvider value={refreshTokensStore}>
-					<ActiveProjectIdStoreProvider value={activeProjectIdStore}>
-						<QueryClientProvider client={queryClient}>
-							<IntlProvider>
-								<NetworkConnectionChangeListener />
-
-								<Box height="100dvh">
-									{platform === 'darwin' ? (
-										<AppTitleBar platform={platform} testId="app-title-bar" />
-									) : null}
-
-									<Box height={MAIN_CONTENT_HEIGHT}>
-										<Suspense
-											fallback={
-												<Box
-													display="flex"
-													justifyContent="center"
-													alignItems="center"
-													height="100%"
-												>
-													<CircularProgress />
-												</Box>
-											}
-										>
-											<ClientApiProvider clientApi={clientApi}>
-												<LocalPeersStoreProvider value={localPeersStore}>
-													<WithInvitesListener>
-														<WithAddedRouteContext>
-															{({ formatMessage, localeState }) => (
-																<RouterProvider
-																	router={router}
-																	context={{
-																		activeProjectIdStore,
-																		formatMessage,
-																		localeState,
-																	}}
-																/>
-															)}
-														</WithAddedRouteContext>
-													</WithInvitesListener>
-												</LocalPeersStoreProvider>
-											</ClientApiProvider>
-										</Suspense>
+					<GlobalEditingStateStoreProvider value={globalEditingStateStore}>
+						<ActiveProjectIdStoreProvider value={activeProjectIdStore}>
+							<QueryClientProvider client={queryClient}>
+								<IntlProvider>
+									<NetworkConnectionChangeListener />
+
+									<Box height="100dvh">
+										{platform === 'darwin' ? (
+											<AppTitleBar platform={platform} testId="app-title-bar" />
+										) : null}
+
+										<Box height={MAIN_CONTENT_HEIGHT}>
+											<Suspense
+												fallback={
+													<Box
+														display="flex"
+														justifyContent="center"
+														alignItems="center"
+														height="100%"
+													>
+														<CircularProgress />
+													</Box>
+												}
+											>
+												<ClientApiProvider clientApi={clientApi}>
+													<LocalPeersStoreProvider value={localPeersStore}>
+														<WithInvitesListener>
+															<WithAddedRouteContext>
+																{({ formatMessage, localeState }) => (
+																	<RouterProvider
+																		router={router}
+																		context={{
+																			activeProjectIdStore,
+																			formatMessage,
+																			localeState,
+																		}}
+																	/>
+																)}
+															</WithAddedRouteContext>
+														</WithInvitesListener>
+													</LocalPeersStoreProvider>
+												</ClientApiProvider>
+											</Suspense>
+										</Box>
 									</Box>
-								</Box>
-							</IntlProvider>
-						</QueryClientProvider>
-					</ActiveProjectIdStoreProvider>
+								</IntlProvider>
+							</QueryClientProvider>
+						</ActiveProjectIdStoreProvider>
+					</GlobalEditingStateStoreProvider>
 				</RefreshTokensStoreProvider>
 			</ThemeProvider>
 		</StrictMode>

src/renderer/src/contexts/global-editing-state-store-context.ts

@@ -0,0 +1,49 @@
+import { createContext, use } from 'react'
+import { createStore, useStore } from 'zustand'
+
+export type GlobalEditingStateStore = ReturnType<
+	typeof createGlobalEditingStateStore
+>
+
+export type GlobalEditingState = boolean
+
+export function createGlobalEditingStateStore(opts?: {
+	initialValue: GlobalEditingState
+}) {
+	const store = createStore<GlobalEditingState>(() => {
+		return !!opts?.initialValue
+	})
+
+	const actions = {
+		update: (value: GlobalEditingState) => {
+			store.setState(value)
+		},
+	}
+
+	return { instance: store, actions }
+}
+
+const GlobalEditingStateStoreContext =
+	createContext<GlobalEditingStateStore | null>(null)
+export const GlobalEditingStateStoreProvider =
+	GlobalEditingStateStoreContext.Provider
+
+function useGlobalEditingStateStore() {
+	const value = use(GlobalEditingStateStoreContext)
+
+	if (!value) {
+		throw new Error('Must set up GlobalEditingStateStoreProvider first')
+	}
+
+	return value
+}
+
+export function useGlobalEditingState(): GlobalEditingState {
+	const store = useGlobalEditingStateStore()
+	return useStore(store.instance)
+}
+
+export function useGlobalEditingStateActions() {
+	const store = useGlobalEditingStateStore()
+	return store.actions
+}

src/renderer/src/generated/icons.generated.ts

@@ -44,11 +44,13 @@ export const iconNames = [
 	'material-expand-more',
 	'material-expand-less',
 	'material-error',
+	'material-edit-filled',
 	'material-close',
 	'material-circle-filled',
 	'material-chevron-right',
 	'material-check',
-	'material-check-circle',
+	'material-check-circle-rounded',
+	'material-check-circle-outline-rounded',
 	'material-category',
 	'material-bolt',
 	'material-auto-fix-high',

src/renderer/src/routes/app/projects/$projectId/download.tsx

@@ -110,7 +110,11 @@ function SuccessPanel({
 					gap={6}
 				>
 					<Box padding={6}>
-						<Icon name="material-check-circle" htmlColor={GREEN} size={160} />
+						<Icon
+							name="material-check-circle-rounded"
+							htmlColor={GREEN}
+							size={160}
+						/>
 					</Box>
 
 					<Typography variant="h1" fontWeight={500} textAlign="center">