src/components/frontmatter/FrontmatterPanel.tsx (1)

171-183: Consider memoizing the filtered top-level fields.

The top-level fields from groupedFields.get(null) are filtered twice: once for schema fields (line 126-128) and once for non-schema fields (line 172-174). Whilst the performance impact is negligible for typical field counts, you could memoize both filtered arrays for clarity.

Apply this diff to memoize the filtered lists:

   // Group fields by parent path for nested object rendering
   const groupedFields = React.useMemo(() => {
     const groups: Map<string | null, typeof allFields> = new Map()

     for (const field of allFields) {
       const parentPath = field.schemaField?.parentPath ?? null
       if (!groups.has(parentPath)) {
         groups.set(parentPath, [])
       }
       groups.get(parentPath)!.push(field)
     }

     return groups
   }, [allFields])
+
+  // Pre-filter top-level fields for rendering
+  const topLevelSchemaFields = React.useMemo(() => 
+    groupedFields.get(null)?.filter(({ schemaField }) => schemaField !== undefined) ?? [],
+    [groupedFields]
+  )
+
+  const topLevelExtraFields = React.useMemo(() => 
+    groupedFields.get(null)?.filter(({ schemaField }) => schemaField === undefined) ?? [],
+    [groupedFields]
+  )

   return (
     <div className="h-full flex flex-col">
       <div className="flex-1 p-4 overflow-y-auto">
         {currentFile ? (
           allFields.length > 0 ? (
             <div className="space-y-6">
               {/* Render top-level SCHEMA fields only */}
-              {groupedFields
-                .get(null)
-                ?.filter(({ schemaField }) => schemaField !== undefined)
-                .map(({ fieldName, schemaField }) => (
+              {topLevelSchemaFields.map(({ fieldName, schemaField }) => (
                   <FrontmatterField
                     key={fieldName}
                     name={fieldName}
                     label={camelCaseToTitleCase(fieldName)}
                     field={schemaField}
                     collectionName={currentFile.collection}
                   />
                 ))}

               {/* Render nested field groups */}
               {Array.from(groupedFields.entries())
                 .filter(([parentPath]) => parentPath !== null)
                 .map(([parentPath, fields]) => (
                   <div key={parentPath} className="space-y-4">
                     {/* Parent section header */}
                     <h3 className="text-sm font-medium text-foreground pt-2">
                       {camelCaseToTitleCase(
                         parentPath!.split('.').pop() || parentPath!
                       )}
                     </h3>

                     {/* Nested fields with indentation */}
                     <div className="pl-4 border-l-2 border-border space-y-4">
                       {fields.map(({ fieldName, schemaField }) => (
                         <FrontmatterField
                           key={fieldName}
                           name={fieldName}
                           label={
                             schemaField?.label ||
                             camelCaseToTitleCase(
                               fieldName.split('.').pop() || fieldName
                             )
                           }
                           field={schemaField}
                           collectionName={currentFile.collection}
                         />
                       ))}
                     </div>
                   </div>
                 ))}

               {/* Render extra fields (not in schema) at the very end, alphabetically */}
-              {groupedFields
-                .get(null)
-                ?.filter(({ schemaField }) => schemaField === undefined)
-                .map(({ fieldName, schemaField }) => (
+              {topLevelExtraFields.map(({ fieldName, schemaField }) => (
                   <FrontmatterField
                     key={fieldName}
                     name={fieldName}
                     label={camelCaseToTitleCase(fieldName)}
                     field={schemaField}
                     collectionName={currentFile.collection}
                   />
                 ))}
             </div>

docs/tasks-todo/task-x-relative-paths-for-images.md (1)

1-284: Excellent technical analysis and planning documentation.

This document provides a thorough examination of the relative paths issue, including Astro's expectations, current implementation analysis, multiple solution options with trade-offs, and comprehensive edge case analysis. The implementation guidance with code sketches is particularly helpful.

Optional: Wrap the bare URL at line 3 in markdown link syntax for consistency:

-https://github.com/dannysmith/astro-editor/issues/53
+[Issue #53](https://github.com/dannysmith/astro-editor/issues/53)

src/components/layout/Layout.tsx (1)

55-58: Clear auto-save callback on unmount

We set the store callback but never clear it, so the store can keep invoking a stale saveFile closure after the layout unmounts. Reset it in the effect cleanup to avoid dangling callbacks.

-  useEffect(() => {
-    useEditorStore.getState().setAutoSaveCallback(saveFile)
-  }, [saveFile])
+  useEffect(() => {
+    useEditorStore.getState().setAutoSaveCallback(saveFile)
+    return () => {
+      useEditorStore.getState().setAutoSaveCallback(null)
+    }
+  }, [saveFile])

src/hooks/useDOMEventListeners.ts (1)

24-35: Bring the comment back in sync with behaviour

The header comment still says we no longer handle 'create-new-file', but the listener below remains active for that event. Updating the prose to match reality will save future readers a head scratch.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/hooks/useFileChangeHandler.ts (1)

45-56: Extract the 3-second magic number to a named constant.

The race condition protection logic is working correctly—lastSaveTimestamp is properly updated after save operations (in useEditorActions.ts:85). However, the hardcoded 3000 value should be extracted to a named constant for maintainability.

Apply this diff:

+// Time window (in milliseconds) to ignore external file changes after our own save
+const SAVE_DEBOUNCE_WINDOW_MS = 3000
+
 export function useFileChangeHandler() {
   useEffect(() => {
     const handleFileChanged = (event: Event) => {
       // ...
       
       if (lastSaveTimestamp) {
         const timeSinceLastSave = Date.now() - lastSaveTimestamp
-        if (timeSinceLastSave < 3000) {
+        if (timeSinceLastSave < SAVE_DEBOUNCE_WINDOW_MS) {
           void debug(
             `Ignoring external change to ${path} - file was recently saved (${timeSinceLastSave}ms ago)`
           )

src/components/layout/StatusBar.tsx (1)

20-33: Consider addressing the root cause rather than polling.

The 500ms polling introduces up to half a second of lag before word counts and the dirty indicator update, and it runs continuously even when the editor is idle. The comment suggests this is to avoid re-renders that interrupt CSS transitions, but polling merely delays re-renders rather than preventing them.

Consider investigating the underlying CSS transition issue:

• Use React.useTransition or React.startTransition to mark updates as non-urgent
• Leverage CSS transition-behavior to control interruption behaviour
• Or adopt a transition library (framer-motion, react-transition-group) that handles state changes gracefully

Polling is generally an anti-pattern in React applications with reactive state management.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro