Fix spatial demo

src/DocExplorer/components/DocExplorer.tsx

@@ -104,7 +104,7 @@ export const DocExplorer: React.FC = () => {
   const [rootFolderDoc, changeRootFolderDoc] = useCurrentRootFolderDoc();
 
   const [showSidebar, setShowSidebar] = useState(true);
-  const [showToolPicker, setShowToolPicker] = useState(false);
+  const [showToolPicker, setShowToolPicker] = useState(true);
 
   const { selectedDoc, selectDoc, selectedDocUrl } = useSelectedDoc({
     rootFolderDoc,

src/patchwork/components/SideBySide.tsx

@@ -282,7 +282,7 @@ function useHighlights(
 
         return [
           {
-            class: "text-[#D59C1E]",
+            class: "bg-yellow-50",
             from,
             to,
           },

src/tee/codemirrorPlugins/annotations.ts

@@ -37,27 +37,28 @@ export const annotationDecorations = EditorView.decorations.compute(
     // TODO: for threads which represent edit groups and point to multiple ranges of text,
     // we can highight all of those multiple ranges here.
     const decorations =
-      sortBy(annotations ?? [], (annotation) => annotation.from)?.flatMap(
-        (annotation) => {
-          if (annotation.to === annotation.from) {
-            return [];
-          }
+      sortBy(
+        annotations.filter((anotation) => anotation) ?? [],
+        (annotation) => annotation.from
+      )?.flatMap((annotation) => {
+        if (annotation.to === annotation.from) {
+          return [];
+        }
 
-          if (
-            !("type" in annotation) ||
-            (annotation.type !== "thread" && annotation.type !== "discussion")
-          ) {
-            return [];
-          }
+        if (
+          !("type" in annotation) ||
+          (annotation.type !== "thread" && annotation.type !== "discussion")
+        ) {
+          return [];
+        }
 
-          const cmRange = amRangeToCMRange(annotation);
-          if (annotation.active) {
-            return activeThreadDecoration.range(cmRange.from, cmRange.to);
-          } else {
-            return commentThreadDecoration.range(cmRange.from, cmRange.to);
-          }
+        const cmRange = amRangeToCMRange(annotation);
+        if (annotation.active) {
+          return activeThreadDecoration.range(cmRange.from, cmRange.to);
+        } else {
+          return commentThreadDecoration.range(cmRange.from, cmRange.to);
         }
-      ) ?? [];
+      }) ?? [];
 
     return Decoration.set(decorations);
   }

src/tee/codemirrorPlugins/patchDecorations.ts

@@ -99,7 +99,7 @@ export const patchDecorations = (diffStyle: DiffStyle) =>
   EditorView.decorations.compute([patchesField, annotationsField], (state) => {
     const activeAnnotations = state
       .field(annotationsField)
-      .filter((annotationsField) => annotationsField.active);
+      .filter((annotationsField) => annotationsField?.active);
 
     const patches = state
       .field(patchesField)