Notebook Autosave Functionality

app/notebook/NotebookClientLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import './globals.css';
 import 'cal-sans/index.css';
 import 'katex/dist/katex.min.css';
@@ -16,11 +16,8 @@ import '@fontsource/inter/700.css';
 import { PageLayout } from '@/app/layouts/PageLayout';
 import { NotebookProvider } from '@/contexts/NotebookContext';
 import { NoteEditorLayout } from '@/components/Notebook/NoteEditorLayout';
-import { clearPendingGrant } from '@/components/Editor/lib/utils/publishingFormStorage';
 
 function NotebookContent({ children }: Readonly<{ children: ReactNode }>) {
-  useEffect(() => () => clearPendingGrant(), []);
-
   // The docked assistant already reserves its own gutter inside the page
   // container, so keeping the container capped would centre the document in
   // what's left and leave a wide dead band on either side. Release the cap for

app/notebook/[orgSlug]/page.tsx

@@ -12,9 +12,9 @@ import {
   getTemplatePlainText,
 } from '@/components/Editor/lib/utils/documentTitle';
 import { useCreateNote, useNoteContent } from '@/hooks/useNote';
+import { NoteService } from '@/services/note.service';
 import { NoteCreationPopover } from '@/components/Notebook/NoteCreationPopover';
 import { useUser } from '@/contexts/UserContext';
-import { getPendingGrant } from '@/components/Editor/lib/utils/publishingFormStorage';
 import type { ID } from '@/types/root';
 
 // An empty document for the "Start blank" funding-opportunity path. The
@@ -42,6 +42,7 @@ export default function OrganizationPage() {
   const isNewGrant = searchParams.get('newGrant') === 'true';
   const grantSource = searchParams.get('grantSource');
   const proposalSource = searchParams.get('proposalSource');
+  const selectedGrantId = searchParams.get('selectedGrantId') ?? undefined;
 
   const createNoteWithContent = async (
     orgSlug: string,
@@ -66,10 +67,13 @@ export default function OrganizationPage() {
         title,
         grouping: 'WORKSPACE',
         documentType,
-        selectedGrantId,
       });
 
       if (newNote) {
+        if (selectedGrantId) {
+          await NoteService.updateNote({ noteId: newNote.id, selectedGrantId });
+        }
+
         await updateNoteContent({
           note: newNote.id,
           fullJson: JSON.stringify(template),
@@ -103,7 +107,6 @@ export default function OrganizationPage() {
     } else if (isNewFunding) {
       // "Upload a document" is handled inline in OpenProposalModal; here we
       // only create from template/blank.
-      const selectedGrantId = getPendingGrant()?.id;
       if (proposalSource === 'blank') {
         createNoteWithContent(selectedOrg.slug, {
           template: BLANK_DOCUMENT,
@@ -132,6 +135,7 @@ export default function OrganizationPage() {
     isNewGrant,
     grantSource,
     proposalSource,
+    selectedGrantId,
   ]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleStartFromTemplate = async (selectedGrantId?: Exclude<ID, null | undefined>) => {

components/Funding/DocumentUploadStep.tsx

@@ -66,7 +66,6 @@ export const DocumentUploadStep = ({
         title: result.title,
         grouping: 'WORKSPACE',
         documentType,
-        selectedGrantId: undefined,
       });
       await updateNoteContent({
         note: newNote.id,

components/Notebook/NoteEditorLayout.tsx

@@ -86,6 +86,7 @@ export function NoteEditorLayout({ onAgentChatDockedChange }: NoteEditorLayoutPr
     noteError,
     setEditor,
     updateNoteTitle,
+    saveDetailsSoon,
     activeNoteId,
     editor,
   } = useNotebookContext();
@@ -212,6 +213,7 @@ export function NoteEditorLayout({ onAgentChatDockedChange }: NoteEditorLayoutPr
   }, [note, noteError, isLoadingNote]);
 
   const [, updateNote, saveNoteNow] = useUpdateNote(note?.id, {
+    saveTitle: (title) => saveDetailsSoon({ title }),
     onTitleUpdate: updateNoteTitle,
     registeredReportProposalId: note?.proposalId,
     // While an assistant review is open the editor holds a merged document;

components/Notebook/PublishingForm/components/FundingSection.tsx

@@ -12,9 +12,8 @@ import { NonprofitSearchSection } from '@/components/Nonprofit';
 import { useNonprofitByFundraiseId } from '@/hooks/useNonprofitByFundraiseId';
 import { useNonprofitSearch } from '@/hooks/useNonprofitSearch';
 import { SelectFundingOpportunityModal } from '@/components/modals/SelectFundingOpportunityModal';
-import type { SelectedGrantData } from '@/components/Editor/lib/utils/publishingFormStorage';
 import { formatCompactAmount } from '@/utils/currency';
-import { GRANT_IMAGE_FALLBACK_GRADIENT } from '@/types/grant';
+import { GRANT_IMAGE_FALLBACK_GRADIENT, type SelectedGrantDetails } from '@/types/grant';
 import { NoteService } from '@/services/note.service';
 
 interface FundingSectionProps {
@@ -25,12 +24,12 @@ const FEATURE_FLAG_NFT_REWARDS = false;
 
 function FundingOpportunitySection({ note }: Readonly<FundingSectionProps>) {
   const { watch, setValue } = useFormContext();
-  const selectedGrant: SelectedGrantData | null = watch('selectedGrant');
+  const selectedGrant: SelectedGrantDetails | null = watch('selectedGrant');
   const workId = watch('workId');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isSavingGrant, setIsSavingGrant] = useState(false);
 
-  const saveSelectedGrant = async (grant: SelectedGrantData | null) => {
+  const saveSelectedGrant = async (grant: SelectedGrantDetails | null) => {
     setIsSavingGrant(true);
     try {
       await NoteService.updateNote({

components/Notebook/PublishingForm/components/WorkImageSection.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
 import { Image as ImageIcon, Plus, X } from 'lucide-react';
 import { SectionHeader } from './SectionHeader';
 import { PublishingFormData } from '../schema';
+import { useAssetUpload } from '@/hooks/useAssetUpload';
 
 const ACCEPT = ['image/jpeg', 'image/png'];
 const MAX_SIZE_MB = 10;
@@ -13,10 +15,12 @@ const isValidFile = (file: unknown): file is File =>
 export function WorkImageSection() {
   const {
     control,
+    getValues,
     formState: { errors },
   } = useFormContext<PublishingFormData>();
 
   const [error, setError] = useState<string | null>(null);
+  const [, uploadAsset] = useAssetUpload();
 
   return (
     <div className="py-3 px-6">
@@ -33,9 +37,26 @@ export function WorkImageSection() {
               file={file}
               existingUrl={existingUrl}
               error={error || (errors.coverImage?.message as string) || null}
-              onSelect={(selected) => {
+              onSelect={async (selected) => {
                 setError(null);
-                field.onChange({ file: selected, url: null });
+                const previousCover = field.value ?? null;
+                // Show the pick right away, then swap in what the server stored.
+                field.onChange({ file: selected, key: null, url: null });
+
+                const uploaded = await uploadAsset(selected, 'post').catch((uploadError) => {
+                  console.error('Error uploading cover image:', uploadError);
+                  return null;
+                });
+
+                // Ignore this upload if its selection was removed or replaced while it ran.
+                if (getValues('coverImage')?.file !== selected) return;
+
+                if (!uploaded) {
+                  field.onChange(previousCover);
+                  toast.error('Failed to upload image. Please try again.');
+                  return;
+                }
+                field.onChange({ file: null, key: uploaded.objectKey, url: uploaded.absoluteUrl });
               }}
               onRemove={() => {
                 setError(null);