From b69be09490c1c60675e5050a2232e631516e9799 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Tue, 15 Oct 2024 21:28:37 +0530
Subject: [PATCH 01/62] fix: inline editor arrow key interactions (edit & enter
 states)

---
 quadratic-client/src/app/actions/actions.ts   |  1 +
 .../src/app/actions/editActionsSpec.ts        | 45 +++++++++++++---
 .../src/app/atoms/inlineEditorAtom.ts         |  4 ++
 quadratic-client/src/app/events/events.ts     |  3 +-
 .../HTMLGrid/inlineEditor/InlineEditor.tsx    |  4 +-
 .../inlineEditor/inlineEditorHandler.ts       | 20 +++++--
 .../inlineEditor/inlineEditorKeyboard.ts      | 47 ++++++++++++----
 .../inlineEditor/inlineEditorMonaco.ts        |  6 ++-
 .../interaction/keyboard/keyboardCell.ts      | 53 +++++++++++++++----
 .../gridGL/interaction/pointer/PointerDown.ts |  7 ++-
 .../interaction/pointer/doubleClickCell.ts    |  8 +--
 .../src/app/gridGL/pixiApp/PixiAppSettings.ts |  5 +-
 quadratic-client/src/app/keyboard/defaults.ts |  8 ++-
 13 files changed, 167 insertions(+), 44 deletions(-)

diff --git a/quadratic-client/src/app/actions/actions.ts b/quadratic-client/src/app/actions/actions.ts
index 63713707a6..8a263ee1e0 100644
--- a/quadratic-client/src/app/actions/actions.ts
+++ b/quadratic-client/src/app/actions/actions.ts
@@ -122,6 +122,7 @@ export enum Action {
   MoveCursorRightWithSelection = 'move_cursor_right_with_selection',
   MoveCursorLeftWithSelection = 'move_cursor_left_with_selection',
   EditCell = 'edit_cell',
+  ToggleArrowMode = 'toggle_arrow_mode',
   DeleteCell = 'delete_cell',
   ShowCellTypeMenu = 'show_cell_type_menu',
   CloseInlineEditor = 'close_inline_editor',
diff --git a/quadratic-client/src/app/actions/editActionsSpec.ts b/quadratic-client/src/app/actions/editActionsSpec.ts
index 8fc33cb604..b4e7edf49c 100644
--- a/quadratic-client/src/app/actions/editActionsSpec.ts
+++ b/quadratic-client/src/app/actions/editActionsSpec.ts
@@ -10,6 +10,7 @@ import {
 } from '@/app/grid/actions/clipboard/clipboard';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { doubleClickCell } from '@/app/gridGL/interaction/pointer/doubleClickCell';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { downloadFile } from '@/app/helpers/downloadFileInBrowser';
@@ -42,6 +43,7 @@ type EditActionSpec = Pick<
   | Action.FillRight
   | Action.FillDown
   | Action.EditCell
+  | Action.ToggleArrowMode
   | Action.DeleteCell
   | Action.CloseInlineEditor
   | Action.SaveInlineEditor
@@ -162,19 +164,46 @@ export const editActionsSpec: EditActionSpec = {
     label: 'Edit cell',
     run: () => {
       if (!inlineEditorHandler.isEditingFormula()) {
-        const cursor = sheets.sheet.cursor;
-        const cursorPosition = cursor.cursorPosition;
-        const column = cursorPosition.x;
-        const row = cursorPosition.y;
-        quadraticCore.getCodeCell(sheets.sheet.id, column, row).then((code) => {
+        const { x, y } = sheets.sheet.cursor.cursorPosition;
+        quadraticCore.getCodeCell(sheets.sheet.id, x, y).then((code) => {
           if (code) {
-            doubleClickCell({ column: Number(code.x), row: Number(code.y), language: code.language, cell: '' });
+            doubleClickCell({
+              column: Number(code.x),
+              row: Number(code.y),
+              language: code.language,
+              cell: '',
+            });
+          } else {
+            quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
+              doubleClickCell({ column: x, row: y, cell });
+            });
+          }
+        });
+        return true;
+      }
+    },
+  },
+  [Action.ToggleArrowMode]: {
+    label: 'Toggle arrow mode',
+    run: () => {
+      if (!inlineEditorHandler.isEditingFormula()) {
+        const { x, y } = sheets.sheet.cursor.cursorPosition;
+        quadraticCore.getCodeCell(sheets.sheet.id, x, y).then((code) => {
+          if (code) {
+            doubleClickCell({
+              column: Number(code.x),
+              row: Number(code.y),
+              language: code.language,
+              cell: '',
+              arrowMode: ArrowMode.NavigateText,
+            });
           } else {
-            quadraticCore.getEditCell(sheets.sheet.id, column, row).then((cell) => {
-              doubleClickCell({ column, row, cell });
+            quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
+              doubleClickCell({ column: x, row: y, cell, arrowMode: ArrowMode.NavigateText });
             });
           }
         });
+        return true;
       }
     },
   },
diff --git a/quadratic-client/src/app/atoms/inlineEditorAtom.ts b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
index eb17a32cef..53dd83bb9d 100644
--- a/quadratic-client/src/app/atoms/inlineEditorAtom.ts
+++ b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
@@ -1,3 +1,4 @@
+import { ArrowMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
 import { atom } from 'recoil';
 
@@ -7,6 +8,7 @@ export interface InlineEditorState {
   left: number;
   top: number;
   lineHeight: number;
+  insertCellRef: boolean;
 }
 
 export const defaultInlineEditor: InlineEditorState = {
@@ -15,6 +17,7 @@ export const defaultInlineEditor: InlineEditorState = {
   left: 0,
   top: 0,
   lineHeight: 19,
+  insertCellRef: true,
 };
 
 export const inlineEditorAtom = atom({
@@ -26,6 +29,7 @@ export const inlineEditorAtom = atom({
         if (newValue.visible) {
           inlineEditorMonaco.focus();
         }
+        inlineEditorKeyboard.arrowMode = newValue.insertCellRef ? ArrowMode.InsertCellRef : ArrowMode.NavigateText;
       });
     },
   ],
diff --git a/quadratic-client/src/app/events/events.ts b/quadratic-client/src/app/events/events.ts
index 95971e56de..b4c8e006cf 100644
--- a/quadratic-client/src/app/events/events.ts
+++ b/quadratic-client/src/app/events/events.ts
@@ -1,5 +1,6 @@
 import { ErrorValidation } from '@/app/gridGL/cells/CellsSheet';
 import { EditingCell } from '@/app/gridGL/HTMLGrid/hoverCell/HoverCell';
+import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { SheetPosTS } from '@/app/gridGL/types/size';
 import {
   JsBordersSheet,
@@ -50,7 +51,7 @@ interface EventTypes {
   setCursor: (cursor?: string, selection?: Selection) => void;
   cursorPosition: () => void;
   generateThumbnail: () => void;
-  changeInput: (input: boolean, initialValue?: string) => void;
+  changeInput: (input: boolean, initialValue?: string, arrowMode?: ArrowMode) => void;
   headingSize: (width: number, height: number) => void;
   gridSettings: () => void;
 
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index 01217d8593..e8114b3dcc 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -26,7 +26,7 @@ export const InlineEditor = () => {
   // fix its positioning problem. There's probably a workaround, but it was too
   // much work.
 
-  const { visible, formula, left, top } = useRecoilValue(inlineEditorAtom);
+  const { visible, formula, left, top, insertCellRef } = useRecoilValue(inlineEditorAtom);
 
   return (
     <div
@@ -61,7 +61,7 @@ export const InlineEditor = () => {
             }}
             onClick={(e) => inlineEditorHandler.openCodeEditor(e)}
           >
-            <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: 'white' }} />
+            <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: insertCellRef ? 'white' : 'black' }} />
           </Button>
         </Tooltip>
       ) : null}
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
index 1fd528a21e..e8c5a06f76 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
@@ -6,7 +6,7 @@ import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { intersects } from '@/app/gridGL/helpers/intersects';
 import { inlineEditorFormula } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula';
-import { inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { ArrowMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
@@ -156,7 +156,7 @@ class InlineEditorHandler {
   };
 
   // Handler for the changeInput event.
-  private changeInput = async (input: boolean, initialValue?: string) => {
+  private changeInput = async (input: boolean, initialValue?: string, arrowMode?: ArrowMode) => {
     if (!input && !this.open) return;
 
     if (initialValue) {
@@ -182,7 +182,7 @@ class InlineEditorHandler {
       let changeToFormula = false;
       if (initialValue) {
         value = initialValue;
-        this.changeToFormula(value[0] === '=');
+        changeToFormula = value[0] === '=';
       } else {
         const formula = await quadraticCore.getCodeCell(this.location.sheetId, this.location.x, this.location.y);
         if (formula?.language === 'Formula') {
@@ -190,8 +190,22 @@ class InlineEditorHandler {
           changeToFormula = true;
         } else {
           value = (await quadraticCore.getEditCell(this.location.sheetId, this.location.x, this.location.y)) || '';
+          changeToFormula = false;
         }
       }
+
+      if (arrowMode === undefined) {
+        if (changeToFormula) {
+          arrowMode = value.length > 1 ? ArrowMode.NavigateText : ArrowMode.InsertCellRef;
+        } else {
+          arrowMode = value ? ArrowMode.NavigateText : ArrowMode.InsertCellRef;
+        }
+      }
+      pixiAppSettings.setInlineEditorState?.((prev) => ({
+        ...prev,
+        insertCellRef: arrowMode === ArrowMode.InsertCellRef,
+      }));
+
       this.formatSummary = await quadraticCore.getCellFormatSummary(
         this.location.sheetId,
         this.location.x,
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index 9d5e1876d5..df69a76c18 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -15,17 +15,23 @@ import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 
+export enum ArrowMode {
+  InsertCellRef,
+  NavigateText,
+}
+
 class InlineEditorKeyboard {
   escapeBackspacePressed = false;
+  arrowMode: ArrowMode = ArrowMode.InsertCellRef;
 
   private handleArrowHorizontal = async (isRight: boolean, e: KeyboardEvent) => {
-    const target = isRight ? inlineEditorMonaco.getLastColumn() : 2;
+    // formula
     if (inlineEditorHandler.isEditingFormula()) {
       if (inlineEditorHandler.cursorIsMoving) {
         e.stopPropagation();
         e.preventDefault();
         keyboardPosition(e);
-      } else {
+      } else if (this.arrowMode === ArrowMode.InsertCellRef) {
         const column = inlineEditorMonaco.getCursorColumn();
         e.stopPropagation();
         e.preventDefault();
@@ -39,9 +45,10 @@ class InlineEditorKeyboard {
           inlineEditorHandler.close(isRight ? 1 : -1, 0, false);
         }
       }
-    } else {
-      const column = inlineEditorMonaco.getCursorColumn();
-      if (column === target) {
+    }
+    // text
+    else {
+      if (this.arrowMode === ArrowMode.InsertCellRef) {
         e.stopPropagation();
         e.preventDefault();
         if (!(await this.handleValidationError())) {
@@ -60,12 +67,13 @@ class InlineEditorKeyboard {
       return;
     }
 
+    // formula
     if (inlineEditorHandler.isEditingFormula()) {
       e.stopPropagation();
       e.preventDefault();
       if (inlineEditorHandler.cursorIsMoving) {
         keyboardPosition(e);
-      } else {
+      } else if (this.arrowMode === ArrowMode.InsertCellRef) {
         // If we're not moving and the formula doesn't want a cell reference,
         // close the editor. We can't just use "is the formula syntactically
         // valid" because many formulas are syntactically valid even though
@@ -87,11 +95,15 @@ class InlineEditorKeyboard {
           return;
         }
       }
-    } else {
-      e.stopPropagation();
-      e.preventDefault();
-      if (!(await this.handleValidationError())) {
-        inlineEditorHandler.close(0, isDown ? 1 : -1, false);
+    }
+    // text
+    else {
+      if (this.arrowMode === ArrowMode.InsertCellRef) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!(await this.handleValidationError())) {
+          inlineEditorHandler.close(0, isDown ? 1 : -1, false);
+        }
       }
     }
   };
@@ -113,6 +125,13 @@ class InlineEditorKeyboard {
     return false;
   }
 
+  toggleArrowMode = () => {
+    pixiAppSettings.setInlineEditorState?.((prev) => ({
+      ...prev,
+      insertCellRef: !prev.insertCellRef,
+    }));
+  };
+
   // Keyboard event for inline editor (via either Monaco's keyDown event or,
   // when on a different sheet, via window's keyDown listener).
   keyDown = async (e: KeyboardEvent) => {
@@ -167,6 +186,12 @@ class InlineEditorKeyboard {
       }
     }
 
+    // toggle arrow mode
+    else if (matchShortcut(Action.ToggleArrowMode, e)) {
+      e.stopPropagation();
+      this.toggleArrowMode();
+    }
+
     // Tab key
     else if (matchShortcut(Action.SaveInlineEditorMoveRight, e)) {
       if (inlineEditorMonaco.autocompleteSuggestionShowing) {
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
index 857f411bda..bc05694aaa 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
@@ -2,6 +2,7 @@
 
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { CURSOR_THICKNESS } from '@/app/gridGL/UI/Cursor';
 import { CellAlign, CellVerticalAlign, CellWrap } from '@/app/quadratic-core-types';
 import { provideCompletionItems, provideHover } from '@/app/quadratic-rust-client/quadratic_rust_client';
@@ -450,7 +451,10 @@ class InlineEditorMonaco {
       inlineEditorKeyboard.keyDown(e.browserEvent);
     });
     this.editor.onDidChangeCursorPosition(inlineEditorHandler.updateMonacoCursorPosition);
-    this.editor.onMouseDown(() => inlineEditorKeyboard.resetKeyboardPosition());
+    this.editor.onMouseDown(() => {
+      inlineEditorKeyboard.resetKeyboardPosition();
+      pixiAppSettings.setInlineEditorState?.((prev) => ({ ...prev, insertCellRef: false }));
+    });
     this.editor.onDidChangeModelContent(() => inlineEditorEvents.emit('valueChanged', this.get()));
   }
 
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
index 628feeb51f..cfc9c742ce 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
@@ -6,6 +6,7 @@ import { openCodeEditor } from '@/app/grid/actions/openCodeEditor';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { SheetCursor } from '@/app/grid/sheet/SheetCursor';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { isAllowedFirstChar } from '@/app/gridGL/interaction/keyboard/keyboardCellChars';
 import { doubleClickCell } from '@/app/gridGL/interaction/pointer/doubleClickCell';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
@@ -76,14 +77,41 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
   // Edit cell
   if (matchShortcut(Action.EditCell, event)) {
     if (!inlineEditorHandler.isEditingFormula()) {
-      const column = cursorPosition.x;
-      const row = cursorPosition.y;
-      quadraticCore.getCodeCell(sheets.sheet.id, column, row).then((code) => {
+      const { x, y } = sheets.sheet.cursor.cursorPosition;
+      quadraticCore.getCodeCell(sheets.sheet.id, x, y).then((code) => {
         if (code) {
-          doubleClickCell({ column: Number(code.x), row: Number(code.y), language: code.language, cell: '' });
+          doubleClickCell({
+            column: Number(code.x),
+            row: Number(code.y),
+            language: code.language,
+            cell: '',
+          });
         } else {
-          quadraticCore.getEditCell(sheets.sheet.id, column, row).then((cell) => {
-            doubleClickCell({ column, row, cell });
+          quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
+            doubleClickCell({ column: x, row: y, cell });
+          });
+        }
+      });
+      return true;
+    }
+  }
+
+  // Edit cell - navigate text
+  if (matchShortcut(Action.ToggleArrowMode, event)) {
+    if (!inlineEditorHandler.isEditingFormula()) {
+      const { x, y } = sheets.sheet.cursor.cursorPosition;
+      quadraticCore.getCodeCell(sheets.sheet.id, x, y).then((code) => {
+        if (code) {
+          doubleClickCell({
+            column: Number(code.x),
+            row: Number(code.y),
+            language: code.language,
+            cell: '',
+            arrowMode: ArrowMode.NavigateText,
+          });
+        } else {
+          quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
+            doubleClickCell({ column: x, row: y, cell, arrowMode: ArrowMode.NavigateText });
           });
         }
       });
@@ -131,11 +159,16 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
   }
 
   if (isAllowedFirstChar(event.key)) {
-    const cursorPosition = cursor.cursorPosition;
-    quadraticCore.getCodeCell(sheets.sheet.id, cursorPosition.x, cursorPosition.y).then((code) => {
+    const { x, y } = cursor.cursorPosition;
+    quadraticCore.getCodeCell(sheets.sheet.id, x, y).then((code) => {
       // open code cell unless this is the actual code cell. In this case we can overwrite it
-      if (code && (Number(code.x) !== cursorPosition.x || Number(code.y) !== cursorPosition.y)) {
-        doubleClickCell({ column: Number(code.x), row: Number(code.y), language: code.language, cell: '' });
+      if (code && (Number(code.x) !== x || Number(code.y) !== y)) {
+        doubleClickCell({
+          column: Number(code.x),
+          row: Number(code.y),
+          language: code.language,
+          cell: '',
+        });
       } else {
         pixiAppSettings.changeInput(true, event.key);
       }
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
index f38c3117f8..198326b300 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
@@ -85,7 +85,12 @@ export class PointerDown {
         event.preventDefault();
         const code = await quadraticCore.getCodeCell(sheet.id, column, row);
         if (code) {
-          doubleClickCell({ column: Number(code.x), row: Number(code.y), language: code.language, cell: '' });
+          doubleClickCell({
+            column: Number(code.x),
+            row: Number(code.y),
+            language: code.language,
+            cell: '',
+          });
         } else {
           const cell = await quadraticCore.getEditCell(sheets.sheet.id, column, row);
           doubleClickCell({ column, row, cell });
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts b/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts
index 09a73aafa8..51118e8141 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts
@@ -1,6 +1,7 @@
 import { hasPermissionToEditFile } from '@/app/actions';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { CodeCellLanguage } from '@/app/quadratic-core-types';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
@@ -11,8 +12,9 @@ export async function doubleClickCell(options: {
   row: number;
   language?: CodeCellLanguage;
   cell?: string;
+  arrowMode?: ArrowMode;
 }) {
-  const { language, cell, column, row } = options;
+  const { language, cell, column, row, arrowMode } = options;
 
   if (inlineEditorHandler.isEditingFormula()) return;
   if (multiplayer.cellIsBeingEdited(column, row, sheets.sheet.id)) return;
@@ -47,7 +49,7 @@ export async function doubleClickCell(options: {
           sheets.sheet.cursor.changePosition({ cursorPosition: { x: column, y: row } });
         }
 
-        pixiAppSettings.changeInput(true, cell);
+        pixiAppSettings.changeInput(true, cell, arrowMode);
       } else {
         pixiAppSettings.setCodeEditorState({
           ...pixiAppSettings.codeEditorState,
@@ -78,6 +80,6 @@ export async function doubleClickCell(options: {
         annotationState: `calendar${value.kind === 'date time' ? '-time' : ''}`,
       });
     }
-    pixiAppSettings.changeInput(true, cell);
+    pixiAppSettings.changeInput(true, cell, arrowMode);
   }
 }
diff --git a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
index e9cc48067c..681395940a 100644
--- a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
+++ b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
@@ -6,6 +6,7 @@ import { defaultInlineEditor, InlineEditorState } from '@/app/atoms/inlineEditor
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
 import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
@@ -177,7 +178,7 @@ class PixiAppSettings {
     }
   }
 
-  changeInput(input: boolean, initialValue?: string) {
+  changeInput(input: boolean, initialValue?: string, arrowMode?: ArrowMode) {
     if (input === false) {
       multiplayer.sendEndCellEdit();
     }
@@ -204,7 +205,7 @@ class PixiAppSettings {
     this.setDirty({ cursor: true });
 
     // this is used by CellInput to control visibility
-    events.emit('changeInput', input, initialValue);
+    events.emit('changeInput', input, initialValue, arrowMode);
   }
 
   get input() {
diff --git a/quadratic-client/src/app/keyboard/defaults.ts b/quadratic-client/src/app/keyboard/defaults.ts
index 44087411f7..138ae57550 100644
--- a/quadratic-client/src/app/keyboard/defaults.ts
+++ b/quadratic-client/src/app/keyboard/defaults.ts
@@ -306,8 +306,12 @@ export const defaultShortcuts: ActionShortcut = {
     windows: [[WindowsModifiers.Shift, Keys.Tab]],
   },
   [Action.EditCell]: {
-    mac: [[Keys.Enter], [MacModifiers.Shift, Keys.Enter], [Keys.F2]],
-    windows: [[Keys.Enter], [WindowsModifiers.Shift, Keys.Enter], [Keys.F2]],
+    mac: [[Keys.Enter], [MacModifiers.Shift, Keys.Enter]],
+    windows: [[Keys.Enter], [WindowsModifiers.Shift, Keys.Enter]],
+  },
+  [Action.ToggleArrowMode]: {
+    mac: [[Keys.F2]],
+    windows: [[Keys.F2]],
   },
   [Action.DeleteCell]: {
     mac: [[Keys.Backspace], [Keys.Delete]],

From 63d315f63c297fdf65dbf2e4bbf52c6c79dd29ff Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 17 Oct 2024 16:44:08 +0530
Subject: [PATCH 02/62] fix bugs

---
 .../src/app/actions/editActionsSpec.ts        |  7 +++++-
 .../src/app/atoms/inlineEditorAtom.ts         |  6 ++---
 .../HTMLGrid/inlineEditor/InlineEditor.tsx    |  4 ++--
 .../inlineEditor/inlineEditorHandler.ts       |  6 ++---
 .../inlineEditor/inlineEditorKeyboard.ts      | 22 +++++++++++++------
 .../interaction/keyboard/keyboardCell.ts      |  9 ++++++--
 .../gridGL/interaction/pointer/PointerDown.ts |  3 ++-
 7 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/quadratic-client/src/app/actions/editActionsSpec.ts b/quadratic-client/src/app/actions/editActionsSpec.ts
index b4e7edf49c..2b2cecfec5 100644
--- a/quadratic-client/src/app/actions/editActionsSpec.ts
+++ b/quadratic-client/src/app/actions/editActionsSpec.ts
@@ -175,7 +175,12 @@ export const editActionsSpec: EditActionSpec = {
             });
           } else {
             quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
-              doubleClickCell({ column: x, row: y, cell });
+              doubleClickCell({
+                column: x,
+                row: y,
+                cell,
+                arrowMode: cell ? ArrowMode.NavigateText : ArrowMode.SelectCell,
+              });
             });
           }
         });
diff --git a/quadratic-client/src/app/atoms/inlineEditorAtom.ts b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
index 53dd83bb9d..a912d82bd7 100644
--- a/quadratic-client/src/app/atoms/inlineEditorAtom.ts
+++ b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
@@ -8,7 +8,7 @@ export interface InlineEditorState {
   left: number;
   top: number;
   lineHeight: number;
-  insertCellRef: boolean;
+  navigateText: boolean;
 }
 
 export const defaultInlineEditor: InlineEditorState = {
@@ -17,7 +17,7 @@ export const defaultInlineEditor: InlineEditorState = {
   left: 0,
   top: 0,
   lineHeight: 19,
-  insertCellRef: true,
+  navigateText: false,
 };
 
 export const inlineEditorAtom = atom({
@@ -29,7 +29,7 @@ export const inlineEditorAtom = atom({
         if (newValue.visible) {
           inlineEditorMonaco.focus();
         }
-        inlineEditorKeyboard.arrowMode = newValue.insertCellRef ? ArrowMode.InsertCellRef : ArrowMode.NavigateText;
+        inlineEditorKeyboard.arrowMode = newValue.navigateText ? ArrowMode.NavigateText : ArrowMode.SelectCell;
       });
     },
   ],
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index e8114b3dcc..2e98b22685 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -26,7 +26,7 @@ export const InlineEditor = () => {
   // fix its positioning problem. There's probably a workaround, but it was too
   // much work.
 
-  const { visible, formula, left, top, insertCellRef } = useRecoilValue(inlineEditorAtom);
+  const { visible, formula, left, top, navigateText } = useRecoilValue(inlineEditorAtom);
 
   return (
     <div
@@ -61,7 +61,7 @@ export const InlineEditor = () => {
             }}
             onClick={(e) => inlineEditorHandler.openCodeEditor(e)}
           >
-            <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: insertCellRef ? 'white' : 'black' }} />
+            <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: navigateText ? 'black' : 'white' }} />
           </Button>
         </Tooltip>
       ) : null}
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
index e8c5a06f76..c01a38a016 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
@@ -196,14 +196,14 @@ class InlineEditorHandler {
 
       if (arrowMode === undefined) {
         if (changeToFormula) {
-          arrowMode = value.length > 1 ? ArrowMode.NavigateText : ArrowMode.InsertCellRef;
+          arrowMode = value.length > 1 ? ArrowMode.NavigateText : ArrowMode.SelectCell;
         } else {
-          arrowMode = value ? ArrowMode.NavigateText : ArrowMode.InsertCellRef;
+          arrowMode = value ? ArrowMode.NavigateText : ArrowMode.SelectCell;
         }
       }
       pixiAppSettings.setInlineEditorState?.((prev) => ({
         ...prev,
-        insertCellRef: arrowMode === ArrowMode.InsertCellRef,
+        navigateText: arrowMode === ArrowMode.NavigateText,
       }));
 
       this.formatSummary = await quadraticCore.getCellFormatSummary(
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index df69a76c18..a79ad6340b 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -16,13 +16,13 @@ import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 
 export enum ArrowMode {
-  InsertCellRef,
+  SelectCell,
   NavigateText,
 }
 
 class InlineEditorKeyboard {
   escapeBackspacePressed = false;
-  arrowMode: ArrowMode = ArrowMode.InsertCellRef;
+  arrowMode: ArrowMode = ArrowMode.SelectCell;
 
   private handleArrowHorizontal = async (isRight: boolean, e: KeyboardEvent) => {
     // formula
@@ -31,7 +31,7 @@ class InlineEditorKeyboard {
         e.stopPropagation();
         e.preventDefault();
         keyboardPosition(e);
-      } else if (this.arrowMode === ArrowMode.InsertCellRef) {
+      } else if (this.arrowMode === ArrowMode.SelectCell) {
         const column = inlineEditorMonaco.getCursorColumn();
         e.stopPropagation();
         e.preventDefault();
@@ -48,7 +48,7 @@ class InlineEditorKeyboard {
     }
     // text
     else {
-      if (this.arrowMode === ArrowMode.InsertCellRef) {
+      if (this.arrowMode === ArrowMode.SelectCell) {
         e.stopPropagation();
         e.preventDefault();
         if (!(await this.handleValidationError())) {
@@ -73,7 +73,7 @@ class InlineEditorKeyboard {
       e.preventDefault();
       if (inlineEditorHandler.cursorIsMoving) {
         keyboardPosition(e);
-      } else if (this.arrowMode === ArrowMode.InsertCellRef) {
+      } else if (this.arrowMode === ArrowMode.SelectCell) {
         // If we're not moving and the formula doesn't want a cell reference,
         // close the editor. We can't just use "is the formula syntactically
         // valid" because many formulas are syntactically valid even though
@@ -98,7 +98,7 @@ class InlineEditorKeyboard {
     }
     // text
     else {
-      if (this.arrowMode === ArrowMode.InsertCellRef) {
+      if (this.arrowMode === ArrowMode.SelectCell) {
         e.stopPropagation();
         e.preventDefault();
         if (!(await this.handleValidationError())) {
@@ -128,7 +128,7 @@ class InlineEditorKeyboard {
   toggleArrowMode = () => {
     pixiAppSettings.setInlineEditorState?.((prev) => ({
       ...prev,
-      insertCellRef: !prev.insertCellRef,
+      navigateText: !prev.navigateText,
     }));
   };
 
@@ -152,6 +152,14 @@ class InlineEditorKeyboard {
       this.escapeBackspacePressed = false;
     }
 
+    const position = inlineEditorMonaco.getPosition();
+    if (e.code === 'Equal' && position.lineNumber === 1 && position.column === 1) {
+      pixiAppSettings.setInlineEditorState?.((prev) => ({
+        ...prev,
+        navigateText: false,
+      }));
+    }
+
     // Escape key
     if (matchShortcut(Action.CloseInlineEditor, e)) {
       e.stopPropagation();
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
index cfc9c742ce..5daee20fd5 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
@@ -88,7 +88,12 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
           });
         } else {
           quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
-            doubleClickCell({ column: x, row: y, cell });
+            doubleClickCell({
+              column: x,
+              row: y,
+              cell,
+              arrowMode: cell ? ArrowMode.NavigateText : ArrowMode.SelectCell,
+            });
           });
         }
       });
@@ -170,7 +175,7 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
           cell: '',
         });
       } else {
-        pixiAppSettings.changeInput(true, event.key);
+        pixiAppSettings.changeInput(true, event.key, ArrowMode.SelectCell);
       }
     });
     return true;
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
index 24ab91d0b8..002f8ddf84 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
@@ -1,6 +1,7 @@
 import { PanMode } from '@/app/atoms/gridPanModeAtom';
 import { events } from '@/app/events/events';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { isLinux } from '@/shared/utils/isLinux';
 import { isMac } from '@/shared/utils/isMac';
@@ -101,7 +102,7 @@ export class PointerDown {
           });
         } else {
           const cell = await quadraticCore.getEditCell(sheets.sheet.id, column, row);
-          doubleClickCell({ column, row, cell });
+          doubleClickCell({ column, row, cell, arrowMode: cell ? ArrowMode.NavigateText : ArrowMode.SelectCell });
         }
         this.active = false;
         return;

From 9fafe8ecb691f5e57f15be071cedd7ca30ddd124 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 17 Oct 2024 21:53:51 +0530
Subject: [PATCH 03/62] bug

---
 .../src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
index bc05694aaa..b816ae31cb 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
@@ -453,7 +453,7 @@ class InlineEditorMonaco {
     this.editor.onDidChangeCursorPosition(inlineEditorHandler.updateMonacoCursorPosition);
     this.editor.onMouseDown(() => {
       inlineEditorKeyboard.resetKeyboardPosition();
-      pixiAppSettings.setInlineEditorState?.((prev) => ({ ...prev, insertCellRef: false }));
+      pixiAppSettings.setInlineEditorState?.((prev) => ({ ...prev, navigateText: true }));
     });
     this.editor.onDidChangeModelContent(() => inlineEditorEvents.emit('valueChanged', this.get()));
   }

From 7be1442fe7c6b8f33f433c1fd70791cad435f856 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Fri, 18 Oct 2024 21:46:32 +0530
Subject: [PATCH 04/62] inline cursor mode ui

---
 .../src/app/atoms/inlineEditorAtom.ts         |  7 +-
 .../HTMLGrid/inlineEditor/InlineEditor.tsx    | 34 +++++-----
 .../inlineEditor/inlineEditorHandler.ts       |  7 +-
 quadratic-client/src/app/gridGL/UI/Cursor.ts  | 67 ++++++++++++++++---
 .../src/shared/components/Icons.tsx           |  4 ++
 5 files changed, 89 insertions(+), 30 deletions(-)

diff --git a/quadratic-client/src/app/atoms/inlineEditorAtom.ts b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
index a912d82bd7..7d27007dda 100644
--- a/quadratic-client/src/app/atoms/inlineEditorAtom.ts
+++ b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
@@ -1,5 +1,7 @@
 import { ArrowMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
+import { LINE_HEIGHT } from '@/app/web-workers/renderWebWorker/worker/cellsLabel/CellLabel';
 import { atom } from 'recoil';
 
 export interface InlineEditorState {
@@ -7,7 +9,7 @@ export interface InlineEditorState {
   formula: boolean;
   left: number;
   top: number;
-  lineHeight: number;
+  height: number;
   navigateText: boolean;
 }
 
@@ -16,7 +18,7 @@ export const defaultInlineEditor: InlineEditorState = {
   formula: false,
   left: 0,
   top: 0,
-  lineHeight: 19,
+  height: LINE_HEIGHT,
   navigateText: false,
 };
 
@@ -30,6 +32,7 @@ export const inlineEditorAtom = atom({
           inlineEditorMonaco.focus();
         }
         inlineEditorKeyboard.arrowMode = newValue.navigateText ? ArrowMode.NavigateText : ArrowMode.SelectCell;
+        pixiApp.cursor.dirty = true;
       });
     },
   ],
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index 2e98b22685..503bec169e 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -3,11 +3,13 @@
 //! in inlineEditorHandler.ts.
 
 import { inlineEditorAtom } from '@/app/atoms/inlineEditorAtom';
+import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { CURSOR_THICKNESS } from '@/app/gridGL/UI/Cursor';
 import { colors } from '@/app/theme/colors';
+import { SubtitlesIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
-import { SubtitlesOutlined } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
+import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 import { useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import './inlineEditorStyles.scss';
@@ -21,12 +23,12 @@ export const InlineEditor = () => {
     }
   }, []);
 
-  // Note: I switched to using material's Tooltip because radix-ui's Tooltip did
-  // not keep position during viewport changes. Even forcing a remount did not
-  // fix its positioning problem. There's probably a workaround, but it was too
-  // much work.
-
-  const { visible, formula, left, top, navigateText } = useRecoilValue(inlineEditorAtom);
+  let { visible, formula, left, top, height } = useRecoilValue(inlineEditorAtom);
+  height += CURSOR_THICKNESS * 1.5;
+  const inlineShowing = inlineEditorHandler.getShowing();
+  if (inlineShowing) {
+    height = Math.max(height, sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y).height);
+  }
 
   return (
     <div
@@ -44,26 +46,28 @@ export const InlineEditor = () => {
       <div id="cell-edit"></div>
 
       {visible && formula ? (
-        <Tooltip title="Open Formula in multi-line code editor">
+        <TooltipPopover label="Open Formula in multi-line code editor">
           <Button
             variant="ghost"
             style={{
+              boxSizing: 'content-box',
               position: 'absolute',
               display: 'flex',
               alignItems: 'center',
               borderRadius: '0',
               padding: '0',
-              marginTop: '-0.23px',
-              width: '23px',
-              height: '23.23px',
+              height: `${height}px`,
               right: '-24px',
               backgroundColor: colors.languageFormula,
             }}
-            onClick={(e) => inlineEditorHandler.openCodeEditor(e)}
+            onClick={(e) => {
+              e.stopPropagation();
+              inlineEditorHandler.openCodeEditor();
+            }}
           >
-            <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: navigateText ? 'black' : 'white' }} />
+            <SubtitlesIcon style={{ color: 'white' }} />
           </Button>
-        </Tooltip>
+        </TooltipPopover>
       ) : null}
     </div>
   );
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
index c01a38a016..832cff5cf2 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
@@ -357,8 +357,8 @@ class InlineEditorHandler {
     pixiAppSettings.setInlineEditorState((prev) => ({
       ...prev,
       left: this.x,
-      top: this.y + OPEN_SANS_FIX.y / 3,
-      lineHeight: this.height,
+      top: this.y,
+      height: this.height,
     }));
 
     pixiApp.cursor.dirty = true;
@@ -501,8 +501,7 @@ class InlineEditorHandler {
   };
 
   // Handler for the click for the expand code editor button.
-  openCodeEditor = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
+  openCodeEditor = () => {
     if (!pixiAppSettings.setCodeEditorState) {
       throw new Error('Expected setCodeEditorState to be defined in openCodeEditor');
     }
diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts
index bbf9ceb88e..1da4c55595 100644
--- a/quadratic-client/src/app/gridGL/UI/Cursor.ts
+++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts
@@ -16,6 +16,7 @@ export const FILL_ALPHA = 0.1;
 const INDICATOR_SIZE = 8;
 const INDICATOR_PADDING = 1;
 const HIDE_INDICATORS_BELOW_SCALE = 0.1;
+const INLINE_NAVIGATE_TEXT_INDICATOR_SIZE = 6;
 
 export type CursorCell = { x: number; y: number; width: number; height: number };
 const CURSOR_CELL_DEFAULT_VALUE: CursorCell = { x: 0, y: 0, width: 0, height: 0 };
@@ -97,8 +98,8 @@ export class Cursor extends Container {
       if (inlineShowing) {
         x = inlineEditorHandler.x - CURSOR_THICKNESS;
         y = inlineEditorHandler.y - CURSOR_THICKNESS;
-        width = inlineEditorHandler.width + CURSOR_THICKNESS * 2;
-        height = inlineEditorHandler.height + CURSOR_THICKNESS * 2;
+        width = Math.max(inlineEditorHandler.width + CURSOR_THICKNESS * 2, width);
+        height = Math.max(inlineEditorHandler.height + CURSOR_THICKNESS * 2, height);
       } else {
         // we have to wait until react renders #cell-edit to properly calculate the width
         setTimeout(() => (this.dirty = true), 0);
@@ -205,11 +206,27 @@ export class Cursor extends Container {
     const inlineShowing = inlineEditorHandler.getShowing();
     if (inlineEditorHandler.formula && inlineShowing && sheets.sheet.id === inlineShowing.sheetId) {
       color = colors.cellColorUserFormula;
-      offsets = sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y);
-      offsets.x = inlineEditorHandler.x - CURSOR_THICKNESS * 0.5;
-      offsets.y = inlineEditorHandler.y - CURSOR_THICKNESS * 0.5;
-      offsets.width = inlineEditorHandler.width + CURSOR_THICKNESS;
-      offsets.height = inlineEditorHandler.height + CURSOR_THICKNESS;
+      const { width, height } = sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y);
+      offsets = {
+        x: inlineEditorHandler.x - CURSOR_THICKNESS * 0.5,
+        y: inlineEditorHandler.y - CURSOR_THICKNESS * 0.5,
+        width: Math.max(inlineEditorHandler.width + CURSOR_THICKNESS, width),
+        height: Math.max(inlineEditorHandler.height + CURSOR_THICKNESS, height),
+      };
+
+      this.graphics.lineStyle({
+        width: CURSOR_THICKNESS * 1.5,
+        color,
+        alpha: CURSOR_INPUT_ALPHA,
+        alignment: 1,
+      });
+      this.graphics.drawRect(offsets.x, offsets.y, offsets.width, offsets.height);
+
+      const indicatorHalfSize = INLINE_NAVIGATE_TEXT_INDICATOR_SIZE / 2;
+      this.graphics.moveTo(offsets.x + offsets.width + indicatorHalfSize, offsets.y);
+      this.graphics.lineTo(offsets.x + offsets.width + indicatorHalfSize + 20, offsets.y);
+      this.graphics.lineTo(offsets.x + offsets.width + indicatorHalfSize + 20, offsets.y + offsets.height);
+      this.graphics.lineTo(offsets.x + offsets.width + indicatorHalfSize, offsets.y + offsets.height);
     } else {
       const { codeEditorState } = pixiAppSettings;
       const codeCell = codeEditorState.codeCell;
@@ -226,15 +243,45 @@ export class Cursor extends Container {
           ? colors.cellColorUserJavascript
           : colors.independence;
     }
+
     if (!color || !offsets) return;
     this.graphics.lineStyle({
-      width: CURSOR_THICKNESS * 1,
+      width: CURSOR_THICKNESS,
       color,
-      alignment: 0.5,
+      alignment: 0,
     });
     this.graphics.drawRect(offsets.x, offsets.y, offsets.width, offsets.height);
   }
 
+  private drawInlineNavigateTextModeIndicator() {
+    const inlineShowing = inlineEditorHandler.getShowing();
+    if (!inlineShowing) return;
+
+    const { visible, navigateText, formula } = pixiAppSettings.inlineEditorState;
+    if (!visible || !navigateText) return;
+
+    const sheet = sheets.sheet;
+    const cell = sheet.cursor.cursorPosition;
+    let { x, y, width, height } = sheet.getCellOffsets(cell.x, cell.y);
+    width = Math.max(inlineEditorHandler.width + CURSOR_THICKNESS * (formula ? 1 : 2), width);
+    height = Math.max(inlineEditorHandler.height + CURSOR_THICKNESS * (formula ? 1 : 2), height);
+    const color = formula ? colors.cellColorUserFormula : colors.cursorCell;
+    const indicatorSize = INLINE_NAVIGATE_TEXT_INDICATOR_SIZE;
+    const halfSize = indicatorSize / 2;
+    const corners = [
+      { x: x - halfSize, y: y - halfSize },
+      { x: x + width - halfSize, y: y - halfSize },
+      { x: x - halfSize, y: y + height - halfSize },
+      { x: x + width - halfSize, y: y + height - halfSize },
+    ];
+    this.graphics.lineStyle(0);
+    this.graphics.beginFill(color);
+    corners.forEach((corner) => {
+      this.graphics.drawRect(corner.x, corner.y, indicatorSize, indicatorSize);
+    });
+    this.graphics.endFill();
+  }
+
   // Besides the dirty flag, we also need to update the cursor when the viewport
   // is dirty and columnRow is set because the columnRow selection is drawn to
   // visible bounds on the screen, not to the selection size.
@@ -252,6 +299,8 @@ export class Cursor extends Container {
       }
       this.drawCodeCursor();
 
+      this.drawInlineNavigateTextModeIndicator();
+
       if (!pixiAppSettings.input.show) {
         this.drawMultiCursor();
         const columnRow = sheets.sheet.cursor.columnRow;
diff --git a/quadratic-client/src/shared/components/Icons.tsx b/quadratic-client/src/shared/components/Icons.tsx
index 5b28239d40..1403a8e8fb 100644
--- a/quadratic-client/src/shared/components/Icons.tsx
+++ b/quadratic-client/src/shared/components/Icons.tsx
@@ -395,6 +395,10 @@ export const StopCircleIcon: IconComponent = (props) => {
   return <Icon {...props}>stop_circle</Icon>;
 };
 
+export const SubtitlesIcon: IconComponent = (props) => {
+  return <Icon {...props}>subtitles</Icon>;
+};
+
 export const VerticalAlignBottomIcon: IconComponent = (props) => {
   return <Icon {...props}>vertical_align_bottom</Icon>;
 };

From b079e74487da9107143f3230416d9641026a4cc3 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Fri, 18 Oct 2024 12:40:23 -0600
Subject: [PATCH 05/62] tweak appearance

---
 quadratic-client/src/app/gridGL/UI/Cursor.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts
index 1da4c55595..bd1ef290e9 100644
--- a/quadratic-client/src/app/gridGL/UI/Cursor.ts
+++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts
@@ -269,10 +269,10 @@ export class Cursor extends Container {
     const indicatorSize = INLINE_NAVIGATE_TEXT_INDICATOR_SIZE;
     const halfSize = indicatorSize / 2;
     const corners = [
-      { x: x - halfSize, y: y - halfSize },
-      { x: x + width - halfSize, y: y - halfSize },
-      { x: x - halfSize, y: y + height - halfSize },
-      { x: x + width - halfSize, y: y + height - halfSize },
+      { x: x - halfSize + 1, y: y - halfSize + 1 },
+      { x: x + width - halfSize - 1, y: y - halfSize + 1 },
+      { x: x - halfSize + 1, y: y + height - halfSize - 1 },
+      { x: x + width - halfSize - 1, y: y + height - halfSize - 1 },
     ];
     this.graphics.lineStyle(0);
     this.graphics.beginFill(color);

From f5016209fb6c3bb98eb7d9a966c7d8955c685df0 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Fri, 18 Oct 2024 12:52:36 -0600
Subject: [PATCH 06/62] Update BottomBar.tsx

---
 .../src/app/ui/menus/BottomBar/BottomBar.tsx         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx b/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
index 52d1269d93..1c8bb7d160 100644
--- a/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
+++ b/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
@@ -1,10 +1,14 @@
+import { inlineEditorAtom } from '@/app/atoms/inlineEditorAtom';
 import { VERSION } from '@/shared/constants/appConstants';
+import { useRecoilValue } from 'recoil';
 import { debugShowFPS } from '../../../debugFlags';
 import BottomBarItem from './BottomBarItem';
 import { SelectionSummary } from './SelectionSummary';
 import SyncState from './SyncState';
 
 export const BottomBar = () => {
+  const inlineEditorState = useRecoilValue(inlineEditorAtom);
+
   return (
     <div
       onContextMenu={(event) => {
@@ -20,6 +24,14 @@ export const BottomBar = () => {
           </BottomBarItem>
         )} */}
 
+        {inlineEditorState.visible && (
+          <BottomBarItem className="hidden lg:block">
+            <a href="https://docs.quadratichq.com/TODO:" target="_blank" rel="noopener noreferrer">
+              {inlineEditorState.navigateText ? 'Edit' : 'Enter'} (F2)
+            </a>
+          </BottomBarItem>
+        )}
+
         {debugShowFPS && (
           <BottomBarItem>
             <div

From f941ab0c575af96256009237781d13f64f96b752 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Sat, 19 Oct 2024 00:32:07 +0530
Subject: [PATCH 07/62] fix cursor flash at (0,0)

---
 quadratic-client/src/app/gridGL/UI/Cursor.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts
index 1da4c55595..3bbec7f426 100644
--- a/quadratic-client/src/app/gridGL/UI/Cursor.ts
+++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts
@@ -96,8 +96,6 @@ export class Cursor extends Container {
     const inlineShowing = inlineEditorHandler.getShowing();
     if (showInput) {
       if (inlineShowing) {
-        x = inlineEditorHandler.x - CURSOR_THICKNESS;
-        y = inlineEditorHandler.y - CURSOR_THICKNESS;
         width = Math.max(inlineEditorHandler.width + CURSOR_THICKNESS * 2, width);
         height = Math.max(inlineEditorHandler.height + CURSOR_THICKNESS * 2, height);
       } else {

From d7d7ae5ac3d0936626567ca388747763c1ebb4b2 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Sat, 19 Oct 2024 00:40:34 +0530
Subject: [PATCH 08/62] fix insert cell highlight showing corners

---
 quadratic-client/src/app/gridGL/UI/Cursor.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts
index 1a6ba9ab38..989e044416 100644
--- a/quadratic-client/src/app/gridGL/UI/Cursor.ts
+++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts
@@ -258,9 +258,7 @@ export class Cursor extends Container {
     const { visible, navigateText, formula } = pixiAppSettings.inlineEditorState;
     if (!visible || !navigateText) return;
 
-    const sheet = sheets.sheet;
-    const cell = sheet.cursor.cursorPosition;
-    let { x, y, width, height } = sheet.getCellOffsets(cell.x, cell.y);
+    let { x, y, width, height } = sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y);
     width = Math.max(inlineEditorHandler.width + CURSOR_THICKNESS * (formula ? 1 : 2), width);
     height = Math.max(inlineEditorHandler.height + CURSOR_THICKNESS * (formula ? 1 : 2), height);
     const color = formula ? colors.cellColorUserFormula : colors.cursorCell;

From e7b312ba970070b04e724f7e48427e02d719eb68 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Sat, 19 Oct 2024 09:45:58 +0530
Subject: [PATCH 09/62] DK feedback

---
 .../src/app/actions/editActionsSpec.ts        |  8 +++---
 .../src/app/atoms/inlineEditorAtom.ts         |  8 +++---
 quadratic-client/src/app/events/events.ts     |  4 +--
 .../HTMLGrid/inlineEditor/InlineEditor.tsx    |  4 +--
 .../inlineEditor/inlineEditorHandler.ts       | 12 ++++----
 .../inlineEditor/inlineEditorKeyboard.ts      | 20 ++++++-------
 .../inlineEditor/inlineEditorMonaco.ts        |  2 +-
 quadratic-client/src/app/gridGL/UI/Cursor.ts  |  8 +++---
 .../interaction/keyboard/keyboardCell.ts      | 10 +++----
 .../gridGL/interaction/pointer/PointerDown.ts |  4 +--
 .../interaction/pointer/doubleClickCell.ts    | 10 +++----
 .../src/app/gridGL/pixiApp/PixiAppSettings.ts |  6 ++--
 quadratic-client/src/app/ui/icons/index.tsx   | 28 +++++++++++++++++++
 .../src/app/ui/menus/BottomBar/BottomBar.tsx  |  2 +-
 .../src/shared/components/Icons.tsx           |  4 ---
 15 files changed, 77 insertions(+), 53 deletions(-)

diff --git a/quadratic-client/src/app/actions/editActionsSpec.ts b/quadratic-client/src/app/actions/editActionsSpec.ts
index 2b2cecfec5..283dddf3d5 100644
--- a/quadratic-client/src/app/actions/editActionsSpec.ts
+++ b/quadratic-client/src/app/actions/editActionsSpec.ts
@@ -10,7 +10,7 @@ import {
 } from '@/app/grid/actions/clipboard/clipboard';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
-import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { doubleClickCell } from '@/app/gridGL/interaction/pointer/doubleClickCell';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { downloadFile } from '@/app/helpers/downloadFileInBrowser';
@@ -179,7 +179,7 @@ export const editActionsSpec: EditActionSpec = {
                 column: x,
                 row: y,
                 cell,
-                arrowMode: cell ? ArrowMode.NavigateText : ArrowMode.SelectCell,
+                cursorMode: cell ? CursorMode.Edit : CursorMode.Enter,
               });
             });
           }
@@ -200,11 +200,11 @@ export const editActionsSpec: EditActionSpec = {
               row: Number(code.y),
               language: code.language,
               cell: '',
-              arrowMode: ArrowMode.NavigateText,
+              cursorMode: CursorMode.Edit,
             });
           } else {
             quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
-              doubleClickCell({ column: x, row: y, cell, arrowMode: ArrowMode.NavigateText });
+              doubleClickCell({ column: x, row: y, cell, cursorMode: CursorMode.Edit });
             });
           }
         });
diff --git a/quadratic-client/src/app/atoms/inlineEditorAtom.ts b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
index 7d27007dda..526371575c 100644
--- a/quadratic-client/src/app/atoms/inlineEditorAtom.ts
+++ b/quadratic-client/src/app/atoms/inlineEditorAtom.ts
@@ -1,4 +1,4 @@
-import { ArrowMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { LINE_HEIGHT } from '@/app/web-workers/renderWebWorker/worker/cellsLabel/CellLabel';
@@ -10,7 +10,7 @@ export interface InlineEditorState {
   left: number;
   top: number;
   height: number;
-  navigateText: boolean;
+  editMode: boolean;
 }
 
 export const defaultInlineEditor: InlineEditorState = {
@@ -19,7 +19,7 @@ export const defaultInlineEditor: InlineEditorState = {
   left: 0,
   top: 0,
   height: LINE_HEIGHT,
-  navigateText: false,
+  editMode: false,
 };
 
 export const inlineEditorAtom = atom({
@@ -31,7 +31,7 @@ export const inlineEditorAtom = atom({
         if (newValue.visible) {
           inlineEditorMonaco.focus();
         }
-        inlineEditorKeyboard.arrowMode = newValue.navigateText ? ArrowMode.NavigateText : ArrowMode.SelectCell;
+        inlineEditorKeyboard.cursorMode = newValue.editMode ? CursorMode.Edit : CursorMode.Enter;
         pixiApp.cursor.dirty = true;
       });
     },
diff --git a/quadratic-client/src/app/events/events.ts b/quadratic-client/src/app/events/events.ts
index b4c8e006cf..e27b779c76 100644
--- a/quadratic-client/src/app/events/events.ts
+++ b/quadratic-client/src/app/events/events.ts
@@ -1,6 +1,6 @@
 import { ErrorValidation } from '@/app/gridGL/cells/CellsSheet';
 import { EditingCell } from '@/app/gridGL/HTMLGrid/hoverCell/HoverCell';
-import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { SheetPosTS } from '@/app/gridGL/types/size';
 import {
   JsBordersSheet,
@@ -51,7 +51,7 @@ interface EventTypes {
   setCursor: (cursor?: string, selection?: Selection) => void;
   cursorPosition: () => void;
   generateThumbnail: () => void;
-  changeInput: (input: boolean, initialValue?: string, arrowMode?: ArrowMode) => void;
+  changeInput: (input: boolean, initialValue?: string, cursorMode?: CursorMode) => void;
   headingSize: (width: number, height: number) => void;
   gridSettings: () => void;
 
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index 503bec169e..4d3a7851e1 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -7,7 +7,7 @@ import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { CURSOR_THICKNESS } from '@/app/gridGL/UI/Cursor';
 import { colors } from '@/app/theme/colors';
-import { SubtitlesIcon } from '@/shared/components/Icons';
+import { SidebarRightIcon } from '@/app/ui/icons';
 import { Button } from '@/shared/shadcn/ui/button';
 import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 import { useCallback } from 'react';
@@ -65,7 +65,7 @@ export const InlineEditor = () => {
               inlineEditorHandler.openCodeEditor();
             }}
           >
-            <SubtitlesIcon style={{ color: 'white' }} />
+            <SidebarRightIcon style={{ color: 'white', width: '20px', height: '20px' }} />
           </Button>
         </TooltipPopover>
       ) : null}
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
index 832cff5cf2..2e33411e79 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts
@@ -6,7 +6,7 @@ import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { intersects } from '@/app/gridGL/helpers/intersects';
 import { inlineEditorFormula } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula';
-import { ArrowMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode, inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
@@ -156,7 +156,7 @@ class InlineEditorHandler {
   };
 
   // Handler for the changeInput event.
-  private changeInput = async (input: boolean, initialValue?: string, arrowMode?: ArrowMode) => {
+  private changeInput = async (input: boolean, initialValue?: string, cursorMode?: CursorMode) => {
     if (!input && !this.open) return;
 
     if (initialValue) {
@@ -194,16 +194,16 @@ class InlineEditorHandler {
         }
       }
 
-      if (arrowMode === undefined) {
+      if (cursorMode === undefined) {
         if (changeToFormula) {
-          arrowMode = value.length > 1 ? ArrowMode.NavigateText : ArrowMode.SelectCell;
+          cursorMode = value.length > 1 ? CursorMode.Edit : CursorMode.Enter;
         } else {
-          arrowMode = value ? ArrowMode.NavigateText : ArrowMode.SelectCell;
+          cursorMode = value ? CursorMode.Edit : CursorMode.Enter;
         }
       }
       pixiAppSettings.setInlineEditorState?.((prev) => ({
         ...prev,
-        navigateText: arrowMode === ArrowMode.NavigateText,
+        editMode: cursorMode === CursorMode.Edit,
       }));
 
       this.formatSummary = await quadraticCore.getCellFormatSummary(
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index a79ad6340b..af4b2242d3 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -15,14 +15,14 @@ import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 
-export enum ArrowMode {
-  SelectCell,
-  NavigateText,
+export enum CursorMode {
+  Enter,
+  Edit,
 }
 
 class InlineEditorKeyboard {
   escapeBackspacePressed = false;
-  arrowMode: ArrowMode = ArrowMode.SelectCell;
+  cursorMode: CursorMode = CursorMode.Enter;
 
   private handleArrowHorizontal = async (isRight: boolean, e: KeyboardEvent) => {
     // formula
@@ -31,7 +31,7 @@ class InlineEditorKeyboard {
         e.stopPropagation();
         e.preventDefault();
         keyboardPosition(e);
-      } else if (this.arrowMode === ArrowMode.SelectCell) {
+      } else if (this.cursorMode === CursorMode.Enter) {
         const column = inlineEditorMonaco.getCursorColumn();
         e.stopPropagation();
         e.preventDefault();
@@ -48,7 +48,7 @@ class InlineEditorKeyboard {
     }
     // text
     else {
-      if (this.arrowMode === ArrowMode.SelectCell) {
+      if (this.cursorMode === CursorMode.Enter) {
         e.stopPropagation();
         e.preventDefault();
         if (!(await this.handleValidationError())) {
@@ -73,7 +73,7 @@ class InlineEditorKeyboard {
       e.preventDefault();
       if (inlineEditorHandler.cursorIsMoving) {
         keyboardPosition(e);
-      } else if (this.arrowMode === ArrowMode.SelectCell) {
+      } else if (this.cursorMode === CursorMode.Enter) {
         // If we're not moving and the formula doesn't want a cell reference,
         // close the editor. We can't just use "is the formula syntactically
         // valid" because many formulas are syntactically valid even though
@@ -98,7 +98,7 @@ class InlineEditorKeyboard {
     }
     // text
     else {
-      if (this.arrowMode === ArrowMode.SelectCell) {
+      if (this.cursorMode === CursorMode.Enter) {
         e.stopPropagation();
         e.preventDefault();
         if (!(await this.handleValidationError())) {
@@ -128,7 +128,7 @@ class InlineEditorKeyboard {
   toggleArrowMode = () => {
     pixiAppSettings.setInlineEditorState?.((prev) => ({
       ...prev,
-      navigateText: !prev.navigateText,
+      editMode: !prev.editMode,
     }));
   };
 
@@ -156,7 +156,7 @@ class InlineEditorKeyboard {
     if (e.code === 'Equal' && position.lineNumber === 1 && position.column === 1) {
       pixiAppSettings.setInlineEditorState?.((prev) => ({
         ...prev,
-        navigateText: false,
+        editMode: false,
       }));
     }
 
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
index b816ae31cb..e78b374f50 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
@@ -453,7 +453,7 @@ class InlineEditorMonaco {
     this.editor.onDidChangeCursorPosition(inlineEditorHandler.updateMonacoCursorPosition);
     this.editor.onMouseDown(() => {
       inlineEditorKeyboard.resetKeyboardPosition();
-      pixiAppSettings.setInlineEditorState?.((prev) => ({ ...prev, navigateText: true }));
+      pixiAppSettings.setInlineEditorState?.((prev) => ({ ...prev, editMode: true }));
     });
     this.editor.onDidChangeModelContent(() => inlineEditorEvents.emit('valueChanged', this.get()));
   }
diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts
index 989e044416..ef93021a0d 100644
--- a/quadratic-client/src/app/gridGL/UI/Cursor.ts
+++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts
@@ -251,12 +251,12 @@ export class Cursor extends Container {
     this.graphics.drawRect(offsets.x, offsets.y, offsets.width, offsets.height);
   }
 
-  private drawInlineNavigateTextModeIndicator() {
+  private drawInlineCursorModeIndicator() {
     const inlineShowing = inlineEditorHandler.getShowing();
     if (!inlineShowing) return;
 
-    const { visible, navigateText, formula } = pixiAppSettings.inlineEditorState;
-    if (!visible || !navigateText) return;
+    const { visible, editMode, formula } = pixiAppSettings.inlineEditorState;
+    if (!visible || editMode) return;
 
     let { x, y, width, height } = sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y);
     width = Math.max(inlineEditorHandler.width + CURSOR_THICKNESS * (formula ? 1 : 2), width);
@@ -295,7 +295,7 @@ export class Cursor extends Container {
       }
       this.drawCodeCursor();
 
-      this.drawInlineNavigateTextModeIndicator();
+      this.drawInlineCursorModeIndicator();
 
       if (!pixiAppSettings.input.show) {
         this.drawMultiCursor();
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
index 5daee20fd5..940a738c25 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
@@ -6,7 +6,7 @@ import { openCodeEditor } from '@/app/grid/actions/openCodeEditor';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { SheetCursor } from '@/app/grid/sheet/SheetCursor';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
-import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { isAllowedFirstChar } from '@/app/gridGL/interaction/keyboard/keyboardCellChars';
 import { doubleClickCell } from '@/app/gridGL/interaction/pointer/doubleClickCell';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
@@ -92,7 +92,7 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
               column: x,
               row: y,
               cell,
-              arrowMode: cell ? ArrowMode.NavigateText : ArrowMode.SelectCell,
+              cursorMode: cell ? CursorMode.Edit : CursorMode.Enter,
             });
           });
         }
@@ -112,11 +112,11 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
             row: Number(code.y),
             language: code.language,
             cell: '',
-            arrowMode: ArrowMode.NavigateText,
+            cursorMode: CursorMode.Edit,
           });
         } else {
           quadraticCore.getEditCell(sheets.sheet.id, x, y).then((cell) => {
-            doubleClickCell({ column: x, row: y, cell, arrowMode: ArrowMode.NavigateText });
+            doubleClickCell({ column: x, row: y, cell, cursorMode: CursorMode.Edit });
           });
         }
       });
@@ -175,7 +175,7 @@ export function keyboardCell(event: React.KeyboardEvent<HTMLElement>): boolean {
           cell: '',
         });
       } else {
-        pixiAppSettings.changeInput(true, event.key, ArrowMode.SelectCell);
+        pixiAppSettings.changeInput(true, event.key, CursorMode.Enter);
       }
     });
     return true;
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
index 002f8ddf84..b6ce67207f 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
@@ -1,7 +1,7 @@
 import { PanMode } from '@/app/atoms/gridPanModeAtom';
 import { events } from '@/app/events/events';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
-import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { isLinux } from '@/shared/utils/isLinux';
 import { isMac } from '@/shared/utils/isMac';
@@ -102,7 +102,7 @@ export class PointerDown {
           });
         } else {
           const cell = await quadraticCore.getEditCell(sheets.sheet.id, column, row);
-          doubleClickCell({ column, row, cell, arrowMode: cell ? ArrowMode.NavigateText : ArrowMode.SelectCell });
+          doubleClickCell({ column, row, cell, cursorMode: cell ? CursorMode.Edit : CursorMode.Enter });
         }
         this.active = false;
         return;
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts b/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts
index 51118e8141..62713f266d 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts
@@ -1,7 +1,7 @@
 import { hasPermissionToEditFile } from '@/app/actions';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
-import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { CodeCellLanguage } from '@/app/quadratic-core-types';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
@@ -12,9 +12,9 @@ export async function doubleClickCell(options: {
   row: number;
   language?: CodeCellLanguage;
   cell?: string;
-  arrowMode?: ArrowMode;
+  cursorMode?: CursorMode;
 }) {
-  const { language, cell, column, row, arrowMode } = options;
+  const { language, cell, column, row, cursorMode } = options;
 
   if (inlineEditorHandler.isEditingFormula()) return;
   if (multiplayer.cellIsBeingEdited(column, row, sheets.sheet.id)) return;
@@ -49,7 +49,7 @@ export async function doubleClickCell(options: {
           sheets.sheet.cursor.changePosition({ cursorPosition: { x: column, y: row } });
         }
 
-        pixiAppSettings.changeInput(true, cell, arrowMode);
+        pixiAppSettings.changeInput(true, cell, cursorMode);
       } else {
         pixiAppSettings.setCodeEditorState({
           ...pixiAppSettings.codeEditorState,
@@ -80,6 +80,6 @@ export async function doubleClickCell(options: {
         annotationState: `calendar${value.kind === 'date time' ? '-time' : ''}`,
       });
     }
-    pixiAppSettings.changeInput(true, cell, arrowMode);
+    pixiAppSettings.changeInput(true, cell, cursorMode);
   }
 }
diff --git a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
index 681395940a..4ed5565cf3 100644
--- a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
+++ b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
@@ -6,7 +6,7 @@ import { defaultInlineEditor, InlineEditorState } from '@/app/atoms/inlineEditor
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
-import { ArrowMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
+import { CursorMode } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
 import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
@@ -178,7 +178,7 @@ class PixiAppSettings {
     }
   }
 
-  changeInput(input: boolean, initialValue?: string, arrowMode?: ArrowMode) {
+  changeInput(input: boolean, initialValue?: string, cursorMode?: CursorMode) {
     if (input === false) {
       multiplayer.sendEndCellEdit();
     }
@@ -205,7 +205,7 @@ class PixiAppSettings {
     this.setDirty({ cursor: true });
 
     // this is used by CellInput to control visibility
-    events.emit('changeInput', input, initialValue, arrowMode);
+    events.emit('changeInput', input, initialValue, cursorMode);
   }
 
   get input() {
diff --git a/quadratic-client/src/app/ui/icons/index.tsx b/quadratic-client/src/app/ui/icons/index.tsx
index 1d9a66187d..c9d562f5e3 100644
--- a/quadratic-client/src/app/ui/icons/index.tsx
+++ b/quadratic-client/src/app/ui/icons/index.tsx
@@ -211,3 +211,31 @@ export const BoxIcon = (props: SvgIconProps) => (
     <path d="M8 17.425V10.575L2 7.1V13.95L8 17.425ZM10 17.425L16 13.95V7.1L10 10.575V17.425ZM9 8.85L14.925 5.425L9 2L3.075 5.425L9 8.85ZM1 15.7C0.683333 15.5167 0.4375 15.275 0.2625 14.975C0.0875 14.675 0 14.3417 0 13.975V6.025C0 5.65833 0.0875 5.325 0.2625 5.025C0.4375 4.725 0.683333 4.48333 1 4.3L8 0.275C8.31667 0.0916667 8.65 0 9 0C9.35 0 9.68333 0.0916667 10 0.275L17 4.3C17.3167 4.48333 17.5625 4.725 17.7375 5.025C17.9125 5.325 18 5.65833 18 6.025V13.975C18 14.3417 17.9125 14.675 17.7375 14.975C17.5625 15.275 17.3167 15.5167 17 15.7L10 19.725C9.68333 19.9083 9.35 20 9 20C8.65 20 8.31667 19.9083 8 19.725L1 15.7Z" />
   </SvgIcon>
 );
+
+export const SidebarRightIcon = (props: SvgIconProps) => (
+  <SvgIcon {...props}>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        width="18"
+        height="18"
+        rx="3"
+        transform="matrix(-1 0 0 1 21 3)"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="1"
+        y1="-1"
+        x2="17"
+        y2="-1"
+        transform="matrix(4.37114e-08 1 1 -4.37114e-08 16 3)"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  </SvgIcon>
+);
diff --git a/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx b/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
index 1c8bb7d160..90c90a2a19 100644
--- a/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
+++ b/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
@@ -27,7 +27,7 @@ export const BottomBar = () => {
         {inlineEditorState.visible && (
           <BottomBarItem className="hidden lg:block">
             <a href="https://docs.quadratichq.com/TODO:" target="_blank" rel="noopener noreferrer">
-              {inlineEditorState.navigateText ? 'Edit' : 'Enter'} (F2)
+              {inlineEditorState.editMode ? 'Edit' : 'Enter'} (F2)
             </a>
           </BottomBarItem>
         )}
diff --git a/quadratic-client/src/shared/components/Icons.tsx b/quadratic-client/src/shared/components/Icons.tsx
index 1403a8e8fb..5b28239d40 100644
--- a/quadratic-client/src/shared/components/Icons.tsx
+++ b/quadratic-client/src/shared/components/Icons.tsx
@@ -395,10 +395,6 @@ export const StopCircleIcon: IconComponent = (props) => {
   return <Icon {...props}>stop_circle</Icon>;
 };
 
-export const SubtitlesIcon: IconComponent = (props) => {
-  return <Icon {...props}>subtitles</Icon>;
-};
-
 export const VerticalAlignBottomIcon: IconComponent = (props) => {
   return <Icon {...props}>vertical_align_bottom</Icon>;
 };

From 2d192d24cd09db7b05da9fb837543041a24b7c33 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Sat, 19 Oct 2024 11:35:13 +0530
Subject: [PATCH 10/62] fix bug

---
 .../app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts
index a7d5eef4f9..e850e2689a 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts
@@ -151,7 +151,9 @@ class InlineEditorFormula {
   // or by keyboard input) or whether they want to switch to a different cell.
   wantsCellRef() {
     const lastCharacter = inlineEditorMonaco.getNonWhitespaceCharBeforeCursor();
-    return ['', ',', '+', '-', '*', '/', '%', '=', '<', '>', '&', '.', '(', '{'].includes(lastCharacter);
+    return (
+      !!lastCharacter && ['', ',', '+', '-', '*', '/', '%', '=', '<', '>', '&', '.', '(', '{'].includes(lastCharacter)
+    );
   }
 
   // Returns whether we are editing a formula only if it is valid (used for

From 7334456ee918ca09df47c7c9c210672b64c48c9f Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Wed, 30 Oct 2024 09:49:26 -0600
Subject: [PATCH 11/62] initial commit

---
 .../src/dashboard/components/FileDragDrop.tsx |  44 +--
 .../src/dashboard/components/FilesList.tsx    |   8 +
 .../dashboard/components/NewFileButton.tsx    | 269 +++++++++++++++++-
 3 files changed, 297 insertions(+), 24 deletions(-)

diff --git a/quadratic-client/src/dashboard/components/FileDragDrop.tsx b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
index f6154e91c7..3001c250d2 100644
--- a/quadratic-client/src/dashboard/components/FileDragDrop.tsx
+++ b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
@@ -44,29 +44,37 @@ export function FileDragDrop({ className }: FileDragDropProps) {
   if (!fileDragDropModal.show) return null;
 
   return (
-    <div
-      id="file-drag-drop"
-      className={cn(
-        'fixed left-0 top-0 z-20 flex h-full w-full flex-col items-center justify-center bg-white opacity-90',
-        className
-      )}
-      onDragEnter={handleDrag}
-      onDragLeave={handleDrag}
-      onDragOver={handleDrag}
-    >
+    <>
       <div
-        className="relative z-10 h-[90%] w-[90%] select-none rounded-lg border-4 border-dashed border-border bg-white opacity-90"
-        onDrop={handleDrop}
+        id="file-drag-drop"
+        className={cn(
+          'fixed left-0 top-0 z-20 flex h-full w-full flex-col items-center justify-center bg-white opacity-90',
+          className
+        )}
+        onDragEnter={handleDrag}
         onDragLeave={handleDrag}
+        onDragOver={handleDrag}
       >
-        <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center gap-4">
-          <span className="text-2xl font-bold text-[#020817]">Drop file here</span>
+        <div
+          className="relative z-10 h-[90%] w-[90%] select-none rounded-lg border-4 border-dashed border-border bg-white opacity-90"
+          onDrop={handleDrop}
+          onDragLeave={handleDrag}
+        >
+          <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center gap-4">
+            <span className="text-2xl font-bold text-[#020817]">Drop file here</span>
 
-          <span className="pl-4 pr-4 text-center text-base font-medium text-[#6A778B]">
-            Start a new spreadsheet by importing a CSV, Parquet, Excel or Grid file(s)
-          </span>
+            <span className="pl-4 pr-4 text-center text-base font-medium text-[#6A778B]">
+              Start a new spreadsheet by importing a CSV, Parquet, Excel or Grid file(s)
+            </span>
+          </div>
         </div>
       </div>
-    </div>
+      <button
+        className="absolute right-6 top-6 z-20"
+        onClick={() => setFileDragDropModal({ show: false, teamUuid: undefined, isPrivate: undefined })}
+      >
+        Close
+      </button>
+    </>
   );
 }
diff --git a/quadratic-client/src/dashboard/components/FilesList.tsx b/quadratic-client/src/dashboard/components/FilesList.tsx
index c2bcdad683..db8927afcb 100644
--- a/quadratic-client/src/dashboard/components/FilesList.tsx
+++ b/quadratic-client/src/dashboard/components/FilesList.tsx
@@ -3,6 +3,7 @@ import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { FileDragDrop } from '@/dashboard/components/FileDragDrop';
 import { DRAWER_WIDTH } from '@/routes/_dashboard';
 import { Action as FilesAction } from '@/routes/api.files.$uuid';
+import { AddIcon } from '@/shared/components/Icons';
 import { ShareFileDialog } from '@/shared/components/ShareDialog';
 import useLocalStorage from '@/shared/hooks/useLocalStorage';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
@@ -123,6 +124,13 @@ export function FilesList({
       />
 
       <FilesListItems viewPreferences={viewPreferences}>
+        <li className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border hover:bg-muted">
+          <button className="flex flex-col items-center justify-center rounded border-dashed border-border text-sm text-muted-foreground">
+            <AddIcon style={{ fontSize: '24px', width: '24px', height: '24px' }} className="mb-2" />
+            New file
+            <em className="text-xs">(or drag and drop a file)</em>
+          </button>
+        </li>
         {filesToRender.map((file, i) => (
           <FilesListItemUserFile
             key={file.uuid}
diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index f4524c7026..ebaca72e34 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -1,17 +1,274 @@
+import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
+import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
 import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
+import { ApiIcon, ArrowDropDownIcon, CsvIcon, DatabaseIcon, DraftIcon, ExamplesIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/shared/shadcn/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/shared/shadcn/ui/dropdown-menu';
+import { Input } from '@/shared/shadcn/ui/input';
+import { Label } from '@/shared/shadcn/ui/label';
+import { cn } from '@/shared/shadcn/utils';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
+import './api-grid.css';
 
 export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
   const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
+  const setFileDragDropState = useSetRecoilState(fileDragDropModalAtom);
 
   return (
-    <Button
-      onClick={() => {
-        setNewFileDialogState({ show: true, isPrivate });
-      }}
+    <div className="flex gap-2">
+      <Dialog>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="default">
+              New file from… <ArrowDropDownIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem>
+              <DraftIcon className="mr-3 h-6 w-6 text-primary" />
+              <span className="flex flex-col">
+                Blank
+                <span className="text-xs text-muted-foreground">An empty spreadsheet</span>
+              </span>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setFileDragDropState({ show: true, isPrivate })}>
+              <CsvIcon className="mr-3 h-6 w-6 text-primary" />
+
+              <span className="flex flex-col">
+                Imported data
+                <span className="text-xs text-muted-foreground">.csv, .xlsx, .pqt, .grid files</span>
+              </span>
+            </DropdownMenuItem>
+            <DialogTrigger asChild>
+              <DropdownMenuItem>
+                <ApiIcon className="mr-3 h-6 w-6 text-primary" />
+
+                <span className="flex flex-col">
+                  API data
+                  <span className="text-xs text-muted-foreground">HTTP requests from code</span>
+                </span>
+              </DropdownMenuItem>
+            </DialogTrigger>
+
+            <DropdownMenuItem asChild>
+              <Link to="/examples" className="flex items-center">
+                <ExamplesIcon className="mr-3 h-6 w-6 text-primary" />
+
+                <span className="flex flex-col">
+                  Example data
+                  <span className="text-xs text-muted-foreground">Research, analysis, and modeling demos</span>
+                </span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LanguageIcon language="POSTGRES" style={{ width: '20px', height: '20px' }} className="mr-3 h-6 w-6" />
+              <span className="flex flex-col">
+                Quadratic (production)
+                <span className="text-xs text-muted-foreground">Postgres connection</span>
+              </span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LanguageIcon language="MYSQL" style={{ width: '20px', height: '20px' }} className="mr-3 h-6 w-6" />
+              <span className="flex flex-col">
+                Customer data
+                <span className="text-xs text-muted-foreground">MySQL connection</span>
+              </span>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="">
+              <DatabaseIcon className="mr-3 h-6 w-6 text-muted-foreground" /> See all connections...
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+          <DialogContentNewFileFromApi />
+        </DropdownMenu>
+      </Dialog>
+      <Button
+        className="hidden"
+        onClick={() => {
+          setNewFileDialogState({ show: true, isPrivate });
+        }}
+      >
+        New file
+      </Button>
+    </div>
+  );
+}
+
+function DialogContentNewFileFromApi({ children }: any) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [json, setJson] = useState({
+    id: 'R7UfaahVfFd',
+    joke: 'My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.',
+    status: 200,
+  });
+  const [url, setUrl] = useState('https://icanhazdadjoke.com');
+  const [activeLanguage, setActiveLanguage] = useState('Javascript');
+
+  // TODO: needs better error handling
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setIsLoading(true);
+    fetch(url, { headers: { Accept: 'application/json' } })
+      .then((res) => res.json())
+      .then((newJson) => {
+        setJson(newJson);
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <DialogContent className="max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>Fetch data from an API</DialogTitle>
+        <DialogDescription>
+          Example showing how to fetch data and put it on a spreadsheet. Create a file then you can tweak the code any
+          way you want including custom headers, authentication, and more.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="flex flex-col gap-2">
+        <form className="flex items-center justify-between gap-8 rounded-lg text-sm" onSubmit={handleSubmit}>
+          <div className="flex items-center gap-2 self-stretch rounded-md bg-accent p-0.5">
+            {['Python', 'Javascript'].map((language) => (
+              <Label
+                onClick={() => setActiveLanguage(language)}
+                className={`flex items-center gap-1 self-stretch rounded ${
+                  activeLanguage === language ? 'bg-background shadow-sm' : ''
+                } px-2`}
+              >
+                <LanguageIcon language={language} sx={{ fontSize: '20px' }} />
+                {language}
+              </Label>
+            ))}
+          </div>
+          <div className="flex flex-grow gap-2">
+            <Input value={url} onChange={(e) => setUrl(e.target.value)} />
+            <Button type="submit" variant="secondary" disabled={isLoading}>
+              GET
+            </Button>
+          </div>
+        </form>
+
+        <div className="border-l border-r border-t border-border p-3">
+          <pre className="text-xs">
+            {activeLanguage === 'Javascript'
+              ? `const res = await fetch(
+  "${url}",
+  { headers: { Accept: 'application/json' }
+});
+const json = await res.json();
+return [
+  Object.keys(json),
+  Object.values(json),
+];`
+              : `import requests
+import pandas as pd
+response = requests.get('${url}')
+df = pd.DataFrame(response.json())
+df
+`}
+          </pre>
+        </div>
+      </div>
+      <div className="-mt-8 overflow-hidden text-sm">
+        <table className="mt-4 w-full max-w-full table-auto border-separate border-spacing-0 border-l border-t border-gray-200 border-b-transparent border-r-transparent">
+          <thead>
+            <tr>
+              <TD as="th" isFirstCol={true}></TD>
+              <TD as="th">A</TD>
+              <TD as="th">B</TD>
+              <TD as="th">C</TD>
+              <TD as="th">D</TD>
+              <TD as="th">E</TD>
+              <TD as="th">F</TD>
+              <th>G</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <TD isFirstCol>1</TD>
+              {Object.keys(json).map((key) => (
+                <TD className="font-bold">{key}</TD>
+              ))}
+              <TD></TD>
+              <TD></TD>
+              <TD></TD>
+            </tr>
+            <tr>
+              <TD isFirstCol>2</TD>
+              {Object.values(json).map((value) => (
+                <TD>{typeof value === 'string' || typeof value === 'number' ? value : JSON.stringify(value)}</TD>
+              ))}
+              <TD></TD>
+              <TD></TD>
+              <TD></TD>
+            </tr>
+            <tr>
+              <TD isFirstCol>3</TD>
+              <TD></TD>
+              <TD></TD>
+              <TD></TD>
+              <TD></TD>
+              <TD></TD>
+              <TD></TD>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <DialogFooter>
+        <DialogClose>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button>Start file with API request</Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
+
+function TD({
+  children,
+  as = 'td',
+  isFirstCol = false,
+  className,
+}: {
+  children?: React.ReactNode;
+  as?: 'td' | 'th';
+  isFirstCol?: boolean;
+  className?: string;
+}) {
+  const Component = as;
+
+  return (
+    <Component
+      className={cn(
+        'h-[20px] overflow-hidden whitespace-nowrap border-b border-r border-gray-200 leading-[20px]',
+        className,
+        isFirstCol
+          ? 'w-[30px] min-w-[30px] max-w-[30px] text-center text-xs font-medium text-muted-foreground'
+          : 'w-[100px] min-w-[100px] max-w-[100px]',
+        as === 'th' ? 'text-xs font-medium text-muted-foreground' : ''
+      )}
     >
-      New file
-    </Button>
+      {children}
+    </Component>
   );
 }

From eecda97b198a6f3f7192552066ba8c82d017ce15 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Wed, 30 Oct 2024 11:39:33 -0600
Subject: [PATCH 12/62] tweaks

---
 .../src/dashboard/components/FilesList.tsx    | 22 ++++---
 .../dashboard/components/NewFileButton.tsx    | 63 ++++++++++++++-----
 2 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/quadratic-client/src/dashboard/components/FilesList.tsx b/quadratic-client/src/dashboard/components/FilesList.tsx
index db8927afcb..51710c89f4 100644
--- a/quadratic-client/src/dashboard/components/FilesList.tsx
+++ b/quadratic-client/src/dashboard/components/FilesList.tsx
@@ -5,12 +5,13 @@ import { DRAWER_WIDTH } from '@/routes/_dashboard';
 import { Action as FilesAction } from '@/routes/api.files.$uuid';
 import { AddIcon } from '@/shared/components/Icons';
 import { ShareFileDialog } from '@/shared/components/ShareDialog';
+import { ROUTES } from '@/shared/constants/routes';
 import useLocalStorage from '@/shared/hooks/useLocalStorage';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { FilePermission, PublicLinkAccess } from 'quadratic-shared/typesAndSchemas';
 import { ReactNode, useCallback, useState } from 'react';
 import { isMobile } from 'react-device-detect';
-import { useFetchers, useLocation } from 'react-router-dom';
+import { Link, useFetchers, useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Empty } from './Empty';
 import { FilesListItemExampleFile, FilesListItemUserFile, FilesListItems } from './FilesListItem';
@@ -124,13 +125,18 @@ export function FilesList({
       />
 
       <FilesListItems viewPreferences={viewPreferences}>
-        <li className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border hover:bg-muted">
-          <button className="flex flex-col items-center justify-center rounded border-dashed border-border text-sm text-muted-foreground">
-            <AddIcon style={{ fontSize: '24px', width: '24px', height: '24px' }} className="mb-2" />
-            New file
-            <em className="text-xs">(or drag and drop a file)</em>
-          </button>
-        </li>
+        {teamUuid && (
+          <li className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border hover:bg-muted">
+            <Link
+              to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}
+              className="flex flex-col items-center justify-center rounded border-dashed border-border text-sm text-muted-foreground"
+            >
+              <AddIcon style={{ fontSize: '24px', width: '24px', height: '24px' }} className="mb-2" />
+              New file
+              <em className="text-xs">(or drag and drop)</em>
+            </Link>
+          </li>
+        )}
         {filesToRender.map((file, i) => (
           <FilesListItemUserFile
             key={file.uuid}
diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index ebaca72e34..0734d96ac2 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -1,7 +1,15 @@
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
 import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
-import { ApiIcon, ArrowDropDownIcon, CsvIcon, DatabaseIcon, DraftIcon, ExamplesIcon } from '@/shared/components/Icons';
+import {
+  ApiIcon,
+  ArrowDropDownIcon,
+  CsvIcon,
+  DatabaseIcon,
+  DraftIcon,
+  ExamplesIcon,
+  UndoIcon,
+} from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
 import {
   Dialog,
@@ -22,11 +30,11 @@ import {
 } from '@/shared/shadcn/ui/dropdown-menu';
 import { Input } from '@/shared/shadcn/ui/input';
 import { Label } from '@/shared/shadcn/ui/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import './api-grid.css';
 
 export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
   const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
@@ -73,7 +81,7 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
                 <ExamplesIcon className="mr-3 h-6 w-6 text-primary" />
 
                 <span className="flex flex-col">
-                  Example data
+                  Examples
                   <span className="text-xs text-muted-foreground">Research, analysis, and modeling demos</span>
                 </span>
               </Link>
@@ -112,14 +120,16 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
   );
 }
 
+type LoadState = 'idle' | 'loading' | 'error';
 function DialogContentNewFileFromApi({ children }: any) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [json, setJson] = useState({
+  const [loadState, setLoadState] = useState<LoadState>('idle');
+  const [json, setJson] = useState<Record<string, any>>({
     id: 'R7UfaahVfFd',
     joke: 'My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.',
     status: 200,
   });
-  const [url, setUrl] = useState('https://icanhazdadjoke.com');
+  const defaultUrl = 'https://icanhazdadjoke.com';
+  const [url, setUrl] = useState(defaultUrl);
   const [activeLanguage, setActiveLanguage] = useState('Javascript');
 
   // TODO: needs better error handling
@@ -127,12 +137,15 @@ function DialogContentNewFileFromApi({ children }: any) {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    setIsLoading(true);
+    setLoadState('loading');
     fetch(url, { headers: { Accept: 'application/json' } })
       .then((res) => res.json())
       .then((newJson) => {
         setJson(newJson);
-        setIsLoading(false);
+        setLoadState('idle');
+      })
+      .catch((err) => {
+        setLoadState('error');
       });
   };
 
@@ -145,8 +158,8 @@ function DialogContentNewFileFromApi({ children }: any) {
           way you want including custom headers, authentication, and more.
         </DialogDescription>
       </DialogHeader>
-      <div className="flex flex-col gap-2">
-        <form className="flex items-center justify-between gap-8 rounded-lg text-sm" onSubmit={handleSubmit}>
+      <div className="relative flex flex-col gap-2">
+        <form className="flex items-center justify-between gap-8 rounded-lg text-sm " onSubmit={handleSubmit}>
           <div className="flex items-center gap-2 self-stretch rounded-md bg-accent p-0.5">
             {['Python', 'Javascript'].map((language) => (
               <Label
@@ -162,11 +175,28 @@ function DialogContentNewFileFromApi({ children }: any) {
           </div>
           <div className="flex flex-grow gap-2">
             <Input value={url} onChange={(e) => setUrl(e.target.value)} />
-            <Button type="submit" variant="secondary" disabled={isLoading}>
+            <Button type="submit" variant="secondary" disabled={loadState === 'loading'}>
               GET
             </Button>
           </div>
         </form>
+        {loadState === 'error' && (
+          <div className="color-foreground absolute bottom-0 left-0 right-0 flex items-center justify-between gap-2 bg-destructive px-3 py-1 text-sm text-background">
+            Error retrieiving data. Start a file anyway to continue debugging.
+            <Tooltip>
+              <TooltipTrigger
+                className="flex items-center"
+                onClick={() => {
+                  setLoadState('idle');
+                  setUrl(defaultUrl);
+                }}
+              >
+                <UndoIcon />
+              </TooltipTrigger>
+              <TooltipContent>Reset</TooltipContent>
+            </Tooltip>
+          </div>
+        )}
 
         <div className="border-l border-r border-t border-border p-3">
           <pre className="text-xs">
@@ -182,9 +212,14 @@ return [
 ];`
               : `import requests
 import pandas as pd
-response = requests.get('${url}')
-df = pd.DataFrame(response.json())
-df
+res = requests.get(
+  'https://icanhazdadjoke.com',
+  headers={"Accept": "application/json"}
+)
+df = pd.DataFrame([response.json()])
+keys = df.columns.tolist()
+values = df.iloc[0].tolist()
+[keys, values]
 `}
           </pre>
         </div>

From e72466629a2f07f3d416b4ee0394797355f561b9 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 7 Nov 2024 19:44:43 +0530
Subject: [PATCH 13/62] fix: disable few default keybindings in inline monaco
 editor

---
 .../inlineEditor/inlineEditorMonaco.ts        | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
index 857f411bda..6088f6cfeb 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts
@@ -408,6 +408,8 @@ class InlineEditorMonaco {
       language: inlineEditorHandler.formula ? 'formula' : 'inline-editor',
     });
 
+    this.disableKeybindings();
+
     interface SuggestController {
       widget: { value: { onDidShow: (fn: () => void) => void; onDidHide: (fn: () => void) => void } };
     }
@@ -478,6 +480,38 @@ class InlineEditorMonaco {
     }
     this.editor.trigger(null, 'editor.action.inlineSuggest.trigger', null);
   }
+
+  disableKeybindings() {
+    editor.addKeybindingRules([
+      {
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+      },
+      {
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyG,
+      },
+      {
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL,
+      },
+      {
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyL,
+      },
+      {
+        keybinding: monaco.KeyCode.F1,
+      },
+      {
+        keybinding: monaco.KeyCode.F3,
+      },
+      {
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.F3,
+      },
+      {
+        keybinding: monaco.KeyMod.Shift | monaco.KeyCode.F3,
+      },
+      {
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.F3,
+      },
+    ]);
+  }
 }
 
 export const inlineEditorMonaco = new InlineEditorMonaco();

From cffeca8c45fb0cc8188934b2b89f02a364e00980 Mon Sep 17 00:00:00 2001
From: David Figatner <david@yopeyopey.com>
Date: Sun, 10 Nov 2024 08:08:32 -0800
Subject: [PATCH 14/62] fix bug with custom dates closing when editing in
 format menu

---
 quadratic-client/src/app/ui/components/DateFormat.tsx       | 4 ++++
 .../Validations/Validation/ValidationUI/ValidationInput.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/quadratic-client/src/app/ui/components/DateFormat.tsx b/quadratic-client/src/app/ui/components/DateFormat.tsx
index a5a5ed64ae..bc73db2e0b 100644
--- a/quadratic-client/src/app/ui/components/DateFormat.tsx
+++ b/quadratic-client/src/app/ui/components/DateFormat.tsx
@@ -230,6 +230,10 @@ export const DateFormat = (props: DateFormatProps) => {
               onChange={changeCustom}
               value={custom ?? ''}
               onEnter={closeMenu}
+              onKeyDown={(e) => {
+                // ensures that the menu does not close when the user presses keys like arrow
+                e.stopPropagation();
+              }}
             />
             <p className="text-xs text-muted-foreground ">
               Learn custom date and time formatting{' '}
diff --git a/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx b/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx
index 33f2ced399..8d44f2e1b0 100644
--- a/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx
+++ b/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx
@@ -1,6 +1,6 @@
 import { Input } from '@/shared/shadcn/ui/input';
 import { cn } from '@/shared/shadcn/utils';
-import { FocusEvent, forwardRef, Ref, useCallback, useEffect, useRef } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, Ref, useCallback, useEffect, useRef } from 'react';
 
 interface ValidationInputProps {
   className?: string;
@@ -15,7 +15,7 @@ interface ValidationInputProps {
 
   // used to update whenever the input is changed (ie, a character is changes within the input box)
   onInput?: (value: string) => void;
-
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   onEnter?: () => void;
 
   footer?: string | JSX.Element;
@@ -46,6 +46,7 @@ export const ValidationInput = forwardRef((props: ValidationInputProps, ref: Ref
     readOnly,
     type,
     clear,
+    onKeyDown,
   } = props;
 
   const parentRef = useRef<HTMLDivElement>(null);
@@ -109,6 +110,7 @@ export const ValidationInput = forwardRef((props: ValidationInputProps, ref: Ref
                 e.preventDefault();
                 e.stopPropagation();
               }
+              onKeyDown?.(e);
             }}
           />
         </div>

From 381826c5a9fce830b5aaf66972195d0c06fc4b8b Mon Sep 17 00:00:00 2001
From: David Figatner <david@yopeyopey.com>
Date: Sun, 10 Nov 2024 08:15:44 -0800
Subject: [PATCH 15/62] possibly fix bug

---
 quadratic-client/src/app/ui/components/DateFormat.tsx     | 8 ++++++--
 .../Validation/ValidationUI/ValidationInput.tsx           | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/quadratic-client/src/app/ui/components/DateFormat.tsx b/quadratic-client/src/app/ui/components/DateFormat.tsx
index bc73db2e0b..1d9dfe2c41 100644
--- a/quadratic-client/src/app/ui/components/DateFormat.tsx
+++ b/quadratic-client/src/app/ui/components/DateFormat.tsx
@@ -227,9 +227,13 @@ export const DateFormat = (props: DateFormatProps) => {
             <ValidationInput
               ref={ref}
               placeholder="%d, %B %Y"
-              onChange={changeCustom}
+              onInput={changeCustom}
               value={custom ?? ''}
-              onEnter={closeMenu}
+              onEnter={(value) => {
+                changeCustom(value);
+                apply();
+                closeMenu();
+              }}
               onKeyDown={(e) => {
                 // ensures that the menu does not close when the user presses keys like arrow
                 e.stopPropagation();
diff --git a/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx b/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx
index 8d44f2e1b0..982fd712f4 100644
--- a/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx
+++ b/quadratic-client/src/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput.tsx
@@ -16,7 +16,7 @@ interface ValidationInputProps {
   // used to update whenever the input is changed (ie, a character is changes within the input box)
   onInput?: (value: string) => void;
   onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-  onEnter?: () => void;
+  onEnter?: (value: string) => void;
 
   footer?: string | JSX.Element;
   height?: string;
@@ -106,7 +106,8 @@ export const ValidationInput = forwardRef((props: ValidationInputProps, ref: Ref
                 }
 
                 // timeout is needed to ensure the state updates before the onEnter function is called
-                setTimeout(onEnter, 0);
+                const savedValue = e.currentTarget.value;
+                setTimeout(() => onEnter?.(savedValue), 0);
                 e.preventDefault();
                 e.stopPropagation();
               }

From 7ffff634d8f63b8f422b76331241378ae1d61f9f Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Sun, 10 Nov 2024 23:31:15 +0530
Subject: [PATCH 16/62] perf: use plotly cdn for python charts

---
 .../python-wasm/quadratic_py/plotly_patch.py   | 18 ++++++++++++++++--
 .../python-wasm/quadratic_py/process_output.py |  4 +++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py b/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
index c3c7a45000..4673685206 100644
--- a/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
+++ b/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
@@ -29,7 +29,7 @@ def set_result(self, figure) -> None:
                 f"Cannot produce multiple figures from a single cell. "
                 f"First produced on line {self._result_set_from_line}, "
                 f"then on {current_result_set_from_line}",
-                source_line=current_result_set_from_line
+                source_line=current_result_set_from_line,
             )
 
         self._result = figure
@@ -46,17 +46,23 @@ def result_set_from_line(self) -> int | None:
 
 async def intercept_plotly_html(code) -> _FigureHolder | None:
     import pyodide.code
+
     if "plotly" not in pyodide.code.find_imports(code):
         return None
 
     await micropip.install("plotly")
     import plotly.io
+    from plotly.basedatatypes import BaseFigure
 
     # TODO: It would be nice if we could prevent the user from setting the default renderer
     plotly.io.renderers.default = "browser"
     figure_holder = _FigureHolder()
 
-    plotly.io._base_renderers.open_html_in_browser = _make_open_html_patch(figure_holder.set_result)
+    plotly.io._base_renderers.open_html_in_browser = _make_open_html_patch(
+        figure_holder.set_result
+    )
+
+    BaseFigure.show = _custom_show
 
     return figure_holder
 
@@ -66,3 +72,11 @@ def open_html_in_browser(html, *args, **kwargs):
         figure_saver(html)
 
     return open_html_in_browser
+
+
+# Override the default show method for plotly figures
+def _custom_show(self):
+    html = self.to_html(include_plotlyjs="cdn", include_mathjax="cdn").replace(
+        ' src="https://', ' crossorigin="anonymous" src="https://'
+    )
+    return html
diff --git a/quadratic-kernels/python-wasm/quadratic_py/process_output.py b/quadratic-kernels/python-wasm/quadratic_py/process_output.py
index 8832d4c4f5..67a09177cf 100644
--- a/quadratic-kernels/python-wasm/quadratic_py/process_output.py
+++ b/quadratic-kernels/python-wasm/quadratic_py/process_output.py
@@ -52,7 +52,9 @@ def process_output_value(output_value):
         import plotly
 
         if isinstance(output_value, plotly.graph_objs._figure.Figure):
-            output_value = output_value.to_html()
+            output_value = output_value.to_html(
+                include_plotlyjs="cdn", include_mathjax="cdn"
+            ).replace(' src="https://', ' crossorigin="anonymous" src="https://')
             output_type = "Chart"
     except:
         pass

From 69b03174a2caa8f4036ad14f7f298c211537ac2e Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Mon, 11 Nov 2024 03:24:51 +0530
Subject: [PATCH 17/62] duplicate code

---
 quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py   | 4 ++--
 quadratic-kernels/python-wasm/quadratic_py/process_output.py | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py b/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
index 4673685206..89e85760c9 100644
--- a/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
+++ b/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
@@ -62,7 +62,7 @@ async def intercept_plotly_html(code) -> _FigureHolder | None:
         figure_holder.set_result
     )
 
-    BaseFigure.show = _custom_show
+    BaseFigure.show = to_html_with_cdn
 
     return figure_holder
 
@@ -75,7 +75,7 @@ def open_html_in_browser(html, *args, **kwargs):
 
 
 # Override the default show method for plotly figures
-def _custom_show(self):
+def to_html_with_cdn(self):
     html = self.to_html(include_plotlyjs="cdn", include_mathjax="cdn").replace(
         ' src="https://', ' crossorigin="anonymous" src="https://'
     )
diff --git a/quadratic-kernels/python-wasm/quadratic_py/process_output.py b/quadratic-kernels/python-wasm/quadratic_py/process_output.py
index 67a09177cf..d11d95bf50 100644
--- a/quadratic-kernels/python-wasm/quadratic_py/process_output.py
+++ b/quadratic-kernels/python-wasm/quadratic_py/process_output.py
@@ -1,6 +1,7 @@
 import pandas as pd
 
 from .utils import to_quadratic_type
+from quadratic_py import plotly_patch
 
 
 def isListEmpty(inList):
@@ -52,9 +53,7 @@ def process_output_value(output_value):
         import plotly
 
         if isinstance(output_value, plotly.graph_objs._figure.Figure):
-            output_value = output_value.to_html(
-                include_plotlyjs="cdn", include_mathjax="cdn"
-            ).replace(' src="https://', ' crossorigin="anonymous" src="https://')
+            output_value = plotly_patch.to_html_with_cdn(output_value)
             output_type = "Chart"
     except:
         pass

From a447f9d5f673ff632caa7b60d323c615b28c7df2 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Mon, 11 Nov 2024 04:02:53 +0530
Subject: [PATCH 18/62] fix: ERROR: TypeError: this.pyodide.globals.get(...) is
 not a function

---
 .../src/app/web-workers/pythonWebWorker/worker/python.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts b/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts
index 9a555e0071..10f99405e8 100644
--- a/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts
+++ b/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts
@@ -167,7 +167,7 @@ class Python {
     if (!this.pyodide) {
       console.warn('Python not loaded');
     } else {
-      const output = await this.pyodide.globals.get('inspect_python')(pythonCode);
+      const output = await this.pyodide.runPythonAsync(`inspect_python(${JSON.stringify(pythonCode)})`);
 
       if (output === undefined) {
         return undefined;

From 9f912feb5799dd9c618cc36934e65f3b391c8f73 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Mon, 11 Nov 2024 18:48:13 +0530
Subject: [PATCH 19/62] fix test

---
 .../python-wasm/quadratic_py/plotly_patch.py         | 12 ++----------
 .../python-wasm/quadratic_py/process_output.py       | 11 +++++++++--
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py b/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
index 89e85760c9..adfe1e2610 100644
--- a/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
+++ b/quadratic-kernels/python-wasm/quadratic_py/plotly_patch.py
@@ -1,6 +1,6 @@
 import micropip
 
-from quadratic_py import code_trace
+from quadratic_py import code_trace, process_output
 
 
 class FigureDisplayError(Exception):
@@ -62,7 +62,7 @@ async def intercept_plotly_html(code) -> _FigureHolder | None:
         figure_holder.set_result
     )
 
-    BaseFigure.show = to_html_with_cdn
+    BaseFigure.show = process_output.to_html_with_cdn
 
     return figure_holder
 
@@ -72,11 +72,3 @@ def open_html_in_browser(html, *args, **kwargs):
         figure_saver(html)
 
     return open_html_in_browser
-
-
-# Override the default show method for plotly figures
-def to_html_with_cdn(self):
-    html = self.to_html(include_plotlyjs="cdn", include_mathjax="cdn").replace(
-        ' src="https://', ' crossorigin="anonymous" src="https://'
-    )
-    return html
diff --git a/quadratic-kernels/python-wasm/quadratic_py/process_output.py b/quadratic-kernels/python-wasm/quadratic_py/process_output.py
index d11d95bf50..1f12acb4ee 100644
--- a/quadratic-kernels/python-wasm/quadratic_py/process_output.py
+++ b/quadratic-kernels/python-wasm/quadratic_py/process_output.py
@@ -1,7 +1,6 @@
 import pandas as pd
 
 from .utils import to_quadratic_type
-from quadratic_py import plotly_patch
 
 
 def isListEmpty(inList):
@@ -53,7 +52,7 @@ def process_output_value(output_value):
         import plotly
 
         if isinstance(output_value, plotly.graph_objs._figure.Figure):
-            output_value = plotly_patch.to_html_with_cdn(output_value)
+            output_value = to_html_with_cdn(output_value)
             output_type = "Chart"
     except:
         pass
@@ -103,3 +102,11 @@ def process_output_value(output_value):
         "output_type": output_type,
         "output_size": output_size,
     }
+
+
+# Override the default show method for plotly figures
+def to_html_with_cdn(self):
+    html = self.to_html(include_plotlyjs="cdn", include_mathjax="cdn").replace(
+        ' src="https://', ' crossorigin="anonymous" src="https://'
+    )
+    return html

From 3b5d0bd123355533d6053e1cb7276a03c2762bb6 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 11 Nov 2024 17:21:43 -0700
Subject: [PATCH 20/62] updates

---
 .../ui/menus/CommandPalette/commands/File.tsx |  1 +
 .../TopBar/TopBarMenus/FileMenubarMenu.tsx    | 15 +++---
 .../dashboard/components/DashboardSidebar.tsx | 31 +++++++----
 .../src/dashboard/components/FileDragDrop.tsx | 51 +++++++++---------
 .../src/dashboard/components/FilesList.tsx    | 16 +-----
 .../dashboard/components/NewFileButton.tsx    | 53 ++++++++-----------
 6 files changed, 81 insertions(+), 86 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
index 749719dffa..a0579c96d5 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
@@ -21,6 +21,7 @@ const commands: CommandGroup = {
       keywords: ['New file', 'Create file'],
       isAvailable: createNewFileAction.isAvailable,
       Component: (props) => {
+        // TODO: create a private file
         const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
         const action = () => createNewFileAction.run({ setEditorInteractionState });
         return <CommandPaletteListItem {...props} icon={<DraftIcon />} action={action} />;
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx
index b94c8ed71d..040d43a1f9 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx
@@ -1,16 +1,15 @@
 import { createNewFileAction, deleteFile, duplicateFileAction } from '@/app/actions';
 import { Action } from '@/app/actions/actions';
-import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { useFileContext } from '@/app/ui/components/FileProvider';
 import { useIsAvailableArgs } from '@/app/ui/hooks/useIsAvailableArgs';
 import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarMenus/MenubarItemAction';
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { DeleteIcon, DraftIcon, FileCopyIcon } from '@/shared/components/Icons';
+import { ROUTES } from '@/shared/constants/routes';
 import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from '@/shared/shadcn/ui/menubar';
-import { useSubmit } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
+import { Link, useSubmit } from 'react-router-dom';
 
 // TODO: (enhancement) move these into `fileActionsSpec` by making the `.run()`
 // function of each accessible from outside of react
@@ -18,10 +17,11 @@ import { useSetRecoilState } from 'recoil';
 export const FileMenubarMenu = () => {
   const { name } = useFileContext();
   const submit = useSubmit();
-  const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
+
   const { isAuthenticated } = useRootRouteLoaderData();
   const {
     file: { uuid: fileUuid },
+    team: { uuid: teamUuid },
   } = useFileRouteLoaderData();
   const { addGlobalSnackbar } = useGlobalSnackbar();
   const isAvailableArgs = useIsAvailableArgs();
@@ -33,8 +33,11 @@ export const FileMenubarMenu = () => {
       <MenubarTrigger>File</MenubarTrigger>
       <MenubarContent className="pointer-move-ignore">
         {createNewFileAction.isAvailable(isAvailableArgs) && (
-          <MenubarItem onClick={() => createNewFileAction.run({ setEditorInteractionState })}>
-            <DraftIcon /> {createNewFileAction.label}
+          <MenubarItem asChild>
+            <Link to={ROUTES.CREATE_FILE_PRIVATE(teamUuid)} reloadDocument>
+              <DraftIcon />
+              {createNewFileAction.label}
+            </Link>
           </MenubarItem>
         )}
         {duplicateFileAction.isAvailable(isAvailableArgs) && (
diff --git a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
index cd6e86e879..77bb2a98b7 100644
--- a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
+++ b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
@@ -1,5 +1,4 @@
 import { colors } from '@/app/theme/colors';
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { TeamSwitcher } from '@/dashboard/components/TeamSwitcher';
 import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
 import { useRootRouteLoaderData } from '@/routes/_root';
@@ -27,8 +26,7 @@ import { Button } from '@/shared/shadcn/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
 import { ReactNode, useState } from 'react';
-import { NavLink, useLocation, useNavigation, useSearchParams, useSubmit } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
+import { Link, NavLink, useLocation, useNavigation, useSearchParams, useSubmit } from 'react-router-dom';
 
 /**
  * Dashboard Navbar
@@ -67,7 +65,11 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
               <DraftIcon className={classNameIcons} />
               Files
             </SidebarNavLink>
-            {canEditTeam && <SidebarNavLinkCreateButton isPrivate={false}>New file</SidebarNavLinkCreateButton>}
+            {canEditTeam && (
+              <SidebarNavLinkCreateButton isPrivate={false} teamUuid={activeTeamUuid}>
+                New file
+              </SidebarNavLinkCreateButton>
+            )}
           </div>
           {canEditTeam && (
             <SidebarNavLink to={ROUTES.TEAM_CONNECTIONS(activeTeamUuid)}>
@@ -99,7 +101,9 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
             <FilePrivateIcon className={classNameIcons} />
             My files
           </SidebarNavLink>
-          <SidebarNavLinkCreateButton isPrivate={true}>New private file</SidebarNavLinkCreateButton>
+          <SidebarNavLinkCreateButton isPrivate={true} teamUuid={activeTeamUuid}>
+            New private file
+          </SidebarNavLinkCreateButton>
         </div>
         <SidebarNavLink to={ROUTES.FILES_SHARED_WITH_ME}>
           <FileSharedWithMeIcon className={classNameIcons} />
@@ -176,18 +180,27 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
   );
 }
 
-function SidebarNavLinkCreateButton({ children, isPrivate }: { children: ReactNode; isPrivate: boolean }) {
-  const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
+function SidebarNavLinkCreateButton({
+  children,
+  isPrivate,
+  teamUuid,
+}: {
+  children: ReactNode;
+  isPrivate: boolean;
+  teamUuid: string;
+}) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
+          asChild
           variant="ghost"
           size="icon-sm"
           className="absolute right-2 top-1 ml-auto opacity-30 hover:opacity-100"
-          onClick={() => setNewFileDialogState({ show: true, isPrivate })}
         >
-          <AddIcon />
+          <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}>
+            <AddIcon />
+          </Link>
         </Button>
       </TooltipTrigger>
       <TooltipContent>{children}</TooltipContent>
diff --git a/quadratic-client/src/dashboard/components/FileDragDrop.tsx b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
index 3001c250d2..5c5741eaa9 100644
--- a/quadratic-client/src/dashboard/components/FileDragDrop.tsx
+++ b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
@@ -1,5 +1,6 @@
 import { useFileImport } from '@/app/ui/hooks/useFileImport';
 import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
+import { CloseIcon } from '@/shared/components/Icons';
 import { cn } from '@/shared/shadcn/utils';
 import { DragEvent, useCallback } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -41,40 +42,38 @@ export function FileDragDrop({ className }: FileDragDropProps) {
     [fileDragDropModal, handleFileImport, setFileDragDropModal, setNewFileDialogState]
   );
 
+  const handleClose = useCallback(() => {
+    setFileDragDropModal({ show: false, teamUuid: undefined, isPrivate: undefined });
+  }, [setFileDragDropModal]);
+
   if (!fileDragDropModal.show) return null;
 
   return (
-    <>
+    <div
+      id="file-drag-drop"
+      className={cn(
+        'fixed left-0 top-0 z-20 flex h-full w-full flex-col items-center justify-center bg-white opacity-90',
+        className
+      )}
+      onClick={handleClose}
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+    >
       <div
-        id="file-drag-drop"
-        className={cn(
-          'fixed left-0 top-0 z-20 flex h-full w-full flex-col items-center justify-center bg-white opacity-90',
-          className
-        )}
-        onDragEnter={handleDrag}
+        className="relative z-10 h-[90%] w-[90%] select-none rounded-lg border-4 border-dashed border-border bg-white opacity-90"
+        onDrop={handleDrop}
         onDragLeave={handleDrag}
-        onDragOver={handleDrag}
       >
-        <div
-          className="relative z-10 h-[90%] w-[90%] select-none rounded-lg border-4 border-dashed border-border bg-white opacity-90"
-          onDrop={handleDrop}
-          onDragLeave={handleDrag}
-        >
-          <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center gap-4">
-            <span className="text-2xl font-bold text-[#020817]">Drop file here</span>
+        <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center gap-2">
+          <span className="text-2xl font-bold text-[#020817]">Drop file here</span>
 
-            <span className="pl-4 pr-4 text-center text-base font-medium text-[#6A778B]">
-              Start a new spreadsheet by importing a CSV, Parquet, Excel or Grid file(s)
-            </span>
-          </div>
+          <span className="pl-4 pr-4 text-center text-base font-medium text-[#6A778B]">
+            Start a new spreadsheet by importing a CSV, Parquet, Excel or Grid file(s)
+          </span>
         </div>
       </div>
-      <button
-        className="absolute right-6 top-6 z-20"
-        onClick={() => setFileDragDropModal({ show: false, teamUuid: undefined, isPrivate: undefined })}
-      >
-        Close
-      </button>
-    </>
+      <CloseIcon className="absolute right-6 top-6 z-20 text-muted-foreground" />
+    </div>
   );
 }
diff --git a/quadratic-client/src/dashboard/components/FilesList.tsx b/quadratic-client/src/dashboard/components/FilesList.tsx
index 51710c89f4..c2bcdad683 100644
--- a/quadratic-client/src/dashboard/components/FilesList.tsx
+++ b/quadratic-client/src/dashboard/components/FilesList.tsx
@@ -3,15 +3,13 @@ import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { FileDragDrop } from '@/dashboard/components/FileDragDrop';
 import { DRAWER_WIDTH } from '@/routes/_dashboard';
 import { Action as FilesAction } from '@/routes/api.files.$uuid';
-import { AddIcon } from '@/shared/components/Icons';
 import { ShareFileDialog } from '@/shared/components/ShareDialog';
-import { ROUTES } from '@/shared/constants/routes';
 import useLocalStorage from '@/shared/hooks/useLocalStorage';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { FilePermission, PublicLinkAccess } from 'quadratic-shared/typesAndSchemas';
 import { ReactNode, useCallback, useState } from 'react';
 import { isMobile } from 'react-device-detect';
-import { Link, useFetchers, useLocation } from 'react-router-dom';
+import { useFetchers, useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Empty } from './Empty';
 import { FilesListItemExampleFile, FilesListItemUserFile, FilesListItems } from './FilesListItem';
@@ -125,18 +123,6 @@ export function FilesList({
       />
 
       <FilesListItems viewPreferences={viewPreferences}>
-        {teamUuid && (
-          <li className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border hover:bg-muted">
-            <Link
-              to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}
-              className="flex flex-col items-center justify-center rounded border-dashed border-border text-sm text-muted-foreground"
-            >
-              <AddIcon style={{ fontSize: '24px', width: '24px', height: '24px' }} className="mb-2" />
-              New file
-              <em className="text-xs">(or drag and drop)</em>
-            </Link>
-          </li>
-        )}
         {filesToRender.map((file, i) => (
           <FilesListItemUserFile
             key={file.uuid}
diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index 0734d96ac2..d34678dcaa 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -1,15 +1,8 @@
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
 import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
-import {
-  ApiIcon,
-  ArrowDropDownIcon,
-  CsvIcon,
-  DatabaseIcon,
-  DraftIcon,
-  ExamplesIcon,
-  UndoIcon,
-} from '@/shared/components/Icons';
+import { ApiIcon, ArrowDropDownIcon, DatabaseIcon, DraftIcon, ExamplesIcon, UndoIcon } from '@/shared/components/Icons';
+import { ROUTES } from '@/shared/constants/routes';
 import { Button } from '@/shared/shadcn/ui/button';
 import {
   Dialog,
@@ -25,6 +18,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/shared/shadcn/ui/dropdown-menu';
@@ -33,36 +27,34 @@ import { Label } from '@/shared/shadcn/ui/label';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 
 export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
+  const { teamUuid } = useParams() as { teamUuid: string };
   const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
   const setFileDragDropState = useSetRecoilState(fileDragDropModalAtom);
 
   return (
-    <div className="flex gap-2">
+    <div className="flex flex-row-reverse gap-2">
+      <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}>
+        <Button variant="default">New file</Button>
+      </Link>
       <Dialog>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="default">
-              New file from… <ArrowDropDownIcon />
+            <Button variant="outline">
+              Import <ArrowDropDownIcon />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>
-              <DraftIcon className="mr-3 h-6 w-6 text-primary" />
-              <span className="flex flex-col">
-                Blank
-                <span className="text-xs text-muted-foreground">An empty spreadsheet</span>
-              </span>
-            </DropdownMenuItem>
+          <DropdownMenuContent>
+            <DropdownMenuLabel className="text-xs text-muted-foreground">Data from…</DropdownMenuLabel>
             <DropdownMenuItem onClick={() => setFileDragDropState({ show: true, isPrivate })}>
-              <CsvIcon className="mr-3 h-6 w-6 text-primary" />
+              <DraftIcon className="mr-3 h-6 w-6 text-primary" />
 
               <span className="flex flex-col">
-                Imported data
-                <span className="text-xs text-muted-foreground">.csv, .xlsx, .pqt, .grid files</span>
+                Local file
+                <span className="text-xs text-muted-foreground">.csv, .xlsx, .pqt, .grid</span>
               </span>
             </DropdownMenuItem>
             <DialogTrigger asChild>
@@ -70,8 +62,8 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
                 <ApiIcon className="mr-3 h-6 w-6 text-primary" />
 
                 <span className="flex flex-col">
-                  API data
-                  <span className="text-xs text-muted-foreground">HTTP requests from code</span>
+                  API
+                  <span className="text-xs text-muted-foreground">Fetch data over HTTP with code</span>
                 </span>
               </DropdownMenuItem>
             </DialogTrigger>
@@ -82,11 +74,12 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
 
                 <span className="flex flex-col">
                   Examples
-                  <span className="text-xs text-muted-foreground">Research, analysis, and modeling demos</span>
+                  <span className="text-xs text-muted-foreground">Files from the Quadratic team</span>
                 </span>
               </Link>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs text-muted-foreground">Data from connections</DropdownMenuLabel>
             <DropdownMenuItem>
               <LanguageIcon language="POSTGRES" style={{ width: '20px', height: '20px' }} className="mr-3 h-6 w-6" />
               <span className="flex flex-col">
@@ -154,8 +147,8 @@ function DialogContentNewFileFromApi({ children }: any) {
       <DialogHeader>
         <DialogTitle>Fetch data from an API</DialogTitle>
         <DialogDescription>
-          Example showing how to fetch data and put it on a spreadsheet. Create a file then you can tweak the code any
-          way you want including custom headers, authentication, and more.
+          This example shows how to fetch data and output it on the sheet. Once you create the file you can edit the
+          code however you wish, including custom headers, authentication, and more.
         </DialogDescription>
       </DialogHeader>
       <div className="relative flex flex-col gap-2">
@@ -273,7 +266,7 @@ values = df.iloc[0].tolist()
         <DialogClose>
           <Button variant="outline">Cancel</Button>
         </DialogClose>
-        <Button>Start file with API request</Button>
+        <Button>Create file with API request</Button>
       </DialogFooter>
     </DialogContent>
   );

From 7264bbd7989f13735b8c0b6ed1fc2fe0127b1d68 Mon Sep 17 00:00:00 2001
From: David Figatner <david@yopeyopey.com>
Date: Tue, 12 Nov 2024 05:03:48 -0800
Subject: [PATCH 21/62] fix bug with a '%' in rust code

---
 quadratic-core/src/date_time.rs  | 6 +++++-
 quadratic-rust-client/src/lib.rs | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/quadratic-core/src/date_time.rs b/quadratic-core/src/date_time.rs
index c929db9939..b2396dd98b 100644
--- a/quadratic-core/src/date_time.rs
+++ b/quadratic-core/src/date_time.rs
@@ -97,7 +97,11 @@ fn find_items_date_start(items: &[Item<'_>]) -> Option<usize> {
 /// Converts a NaiveDateTime to a date and time string using a strftime format string.
 pub fn date_time_to_date_time_string(date_time: NaiveDateTime, format: Option<String>) -> String {
     let format = format.map_or(DEFAULT_DATE_TIME_FORMAT.to_string(), |f| f);
-    date_time.format(&format).to_string()
+    let strftime_items = StrftimeItems::new(&format);
+    let Ok(items) = strftime_items.parse() else {
+        return date_time.format(DEFAULT_DATE_TIME_FORMAT).to_string();
+    };
+    date_time.format_with_items(items.iter()).to_string()
 }
 
 /// Converts a NaiveDateTime to a date-only string using a strftime format string.
diff --git a/quadratic-rust-client/src/lib.rs b/quadratic-rust-client/src/lib.rs
index e4e5920177..562bf8d512 100644
--- a/quadratic-rust-client/src/lib.rs
+++ b/quadratic-rust-client/src/lib.rs
@@ -25,3 +25,8 @@ impl SheetOffsetsWasm {
         SheetOffsets::default()
     }
 }
+
+#[wasm_bindgen(start)]
+pub fn start() {
+    console_error_panic_hook::set_once();
+}

From c6d67233345676d07faafa31ed7fef91c7efec68 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 12 Nov 2024 10:15:00 -0700
Subject: [PATCH 22/62] fix new file in ocmmand palette

---
 quadratic-client/src/app/actions.ts              |  4 ++--
 .../ui/menus/CommandPalette/commands/File.tsx    | 16 +++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/quadratic-client/src/app/actions.ts b/quadratic-client/src/app/actions.ts
index 13ed77464b..ca0232a6de 100644
--- a/quadratic-client/src/app/actions.ts
+++ b/quadratic-client/src/app/actions.ts
@@ -66,8 +66,8 @@ export const isAvailableBecauseFileLocationIsAccessibleAndWriteable = ({
 export const createNewFileAction = {
   label: 'New',
   isAvailable: isAvailableBecauseFileLocationIsAccessibleAndWriteable,
-  run({ setEditorInteractionState }: { setEditorInteractionState: SetterOrUpdater<EditorInteractionState> }) {
-    setEditorInteractionState((prevState) => ({ ...prevState, showNewFileMenu: true }));
+  run({ teamUuid }: { teamUuid: string }) {
+    window.location.href = ROUTES.CREATE_FILE_PRIVATE(teamUuid);
   },
 };
 
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
index 5e55100afc..f02ebcc767 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
@@ -1,17 +1,14 @@
 import { createNewFileAction, deleteFile, duplicateFileAction, isAvailableBecauseCanEditFile } from '@/app/actions';
 import { Action } from '@/app/actions/actions';
 import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
-import {
-  editorInteractionStateAtom,
-  editorInteractionStateUserAtom,
-  editorInteractionStateUuidAtom,
-} from '@/app/atoms/editorInteractionStateAtom';
+import { editorInteractionStateUserAtom, editorInteractionStateUuidAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { useFileContext } from '@/app/ui/components/FileProvider';
 import { CommandGroup, CommandPaletteListItem } from '@/app/ui/menus/CommandPalette/CommandPaletteListItem';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { DeleteIcon, DraftIcon, FileCopyIcon } from '@/shared/components/Icons';
+import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { useParams, useSubmit } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 // TODO: make the types better here so it knows whether this exists
 const renameFileActionSpec = defaultActionSpec[Action.FileRename];
@@ -25,9 +22,10 @@ const commands: CommandGroup = {
       keywords: ['New file', 'Create file'],
       isAvailable: createNewFileAction.isAvailable,
       Component: (props) => {
-        // TODO: create a private file
-        const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
-        const action = () => createNewFileAction.run({ setEditorInteractionState });
+        const {
+          team: { uuid: teamUuid },
+        } = useFileRouteLoaderData();
+        const action = () => createNewFileAction.run({ teamUuid });
         return <CommandPaletteListItem {...props} icon={<DraftIcon />} action={action} />;
       },
     },

From a08bb159f8298a2a8545c678050cde59dea58d5a Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Wed, 13 Nov 2024 02:58:42 +0530
Subject: [PATCH 23/62] prevent browser defaults from inline editor

---
 .../HTMLGrid/inlineEditor/inlineEditorKeyboard.ts  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index 9ff250e73c..2127c56b45 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -337,6 +337,12 @@ class InlineEditorKeyboard {
       inlineEditorMonaco.insertTextAtCursor(formattedTime);
     }
 
+    // prevent browser default behavior for these shortcuts
+    else if (matchShortcut(Action.ShowGoToMenu, e) || matchShortcut(Action.FindInCurrentSheet, e)) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
     // Fallback for all other keys (used to end cursorIsMoving and return
     // control to the formula box)
     else {
@@ -355,13 +361,7 @@ class InlineEditorKeyboard {
   // Resets the keyboard position after cursorIsMoving has ended.
   resetKeyboardPosition(skipFocus?: boolean) {
     const location = inlineEditorHandler.location;
-    if (!location) {
-      return;
-    }
-
-    if (!inlineEditorHandler.cursorIsMoving) {
-      return;
-    }
+    if (!location) return;
 
     inlineEditorHandler.cursorIsMoving = false;
     pixiApp.cellHighlights.clearHighlightedCell();

From 4f3c1c979e0944356b632e929b6bfddc2867ab01 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Wed, 13 Nov 2024 03:11:51 +0530
Subject: [PATCH 24/62] add goto and find shortcuts to inline editor

---
 .../inlineEditor/inlineEditorKeyboard.ts      | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index 2127c56b45..1296b4c2f9 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -2,6 +2,7 @@
 //! handles when the cursorIsMoving outside of the inline formula edit box.
 
 import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { getSingleSelection } from '@/app/grid/sheet/selection';
@@ -307,6 +308,24 @@ class InlineEditorKeyboard {
       }
     }
 
+    // show go to menu
+    else if (matchShortcut(Action.ShowGoToMenu, e)) {
+      e.stopPropagation();
+      e.preventDefault();
+      inlineEditorHandler.close(0, 0, false).then(() => {
+        defaultActionSpec[Action.ShowGoToMenu].run();
+      });
+    }
+
+    // show find in current sheet
+    else if (matchShortcut(Action.FindInCurrentSheet, e)) {
+      e.stopPropagation();
+      e.preventDefault();
+      inlineEditorHandler.close(0, 0, false).then(() => {
+        defaultActionSpec[Action.FindInCurrentSheet].run();
+      });
+    }
+
     // trigger cell type menu
     else if (matchShortcut(Action.ShowCellTypeMenu, e) && inlineEditorMonaco.get().length === 0) {
       e.preventDefault();
@@ -337,12 +356,6 @@ class InlineEditorKeyboard {
       inlineEditorMonaco.insertTextAtCursor(formattedTime);
     }
 
-    // prevent browser default behavior for these shortcuts
-    else if (matchShortcut(Action.ShowGoToMenu, e) || matchShortcut(Action.FindInCurrentSheet, e)) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-
     // Fallback for all other keys (used to end cursorIsMoving and return
     // control to the formula box)
     else {

From 0045c8a3da9f36f4a1a67a499382d2d043773685 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 12 Nov 2024 15:54:15 -0700
Subject: [PATCH 25/62] tweaks

---
 .../src/app/actions/viewActionsSpec.ts        |   1 -
 .../app/atoms/editorInteractionStateAtom.ts   |   5 -
 .../src/app/helpers/codeCellLanguage.ts       |   2 +-
 quadratic-client/src/app/ui/QuadraticUI.tsx   |  17 -
 .../src/app/ui/components/LanguageIcon.tsx    |   4 +-
 quadratic-client/src/app/ui/icons/index.tsx   |  74 ++---
 .../TopBar/TopBarMenus/FileMenubarMenu.tsx    |  11 +-
 .../dashboard/components/DashboardSidebar.tsx |   2 +-
 .../components/FilesListEmptyState.tsx        |  17 +-
 .../dashboard/components/NewFileButton.tsx    | 308 ++++--------------
 .../routes/teams.$teamUuid.files.private.tsx  |   7 +-
 11 files changed, 125 insertions(+), 323 deletions(-)

diff --git a/quadratic-client/src/app/actions/viewActionsSpec.ts b/quadratic-client/src/app/actions/viewActionsSpec.ts
index e3ffc2ba63..9ba8d5fa86 100644
--- a/quadratic-client/src/app/actions/viewActionsSpec.ts
+++ b/quadratic-client/src/app/actions/viewActionsSpec.ts
@@ -123,7 +123,6 @@ export const viewActionsSpec: ViewActionSpec = {
           showConnectionsMenu: false,
           showGoToMenu: false,
           showFeedbackMenu: false,
-          showNewFileMenu: false,
           showRenameFileMenu: false,
           showShareFileMenu: false,
           showSearch: false,
diff --git a/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts b/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts
index d789fae4a3..c210751699 100644
--- a/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts
+++ b/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts
@@ -11,7 +11,6 @@ export interface EditorInteractionState {
   showConnectionsMenu: boolean;
   showGoToMenu: boolean;
   showFeedbackMenu: boolean;
-  showNewFileMenu: boolean;
   showRenameFileMenu: boolean;
   showShareFileMenu: boolean;
   showSearch: boolean | SearchOptions;
@@ -33,7 +32,6 @@ export const defaultEditorInteractionState: EditorInteractionState = {
   showConnectionsMenu: false,
   showGoToMenu: false,
   showFeedbackMenu: false,
-  showNewFileMenu: false,
   showRenameFileMenu: false,
   showShareFileMenu: false,
   showSearch: false,
@@ -62,7 +60,6 @@ export const editorInteractionStateAtom = atom<EditorInteractionState>({
           oldValue.showConnectionsMenu ||
           oldValue.showGoToMenu ||
           oldValue.showFeedbackMenu ||
-          oldValue.showNewFileMenu ||
           oldValue.showRenameFileMenu ||
           oldValue.showShareFileMenu ||
           oldValue.showSearch ||
@@ -73,7 +70,6 @@ export const editorInteractionStateAtom = atom<EditorInteractionState>({
           newValue.showConnectionsMenu ||
           newValue.showGoToMenu ||
           newValue.showFeedbackMenu ||
-          newValue.showNewFileMenu ||
           newValue.showRenameFileMenu ||
           newValue.showShareFileMenu ||
           newValue.showSearch ||
@@ -103,7 +99,6 @@ export const editorInteractionStateShowCommandPaletteAtom = createSelector('show
 export const editorInteractionStateShowConnectionsMenuAtom = createSelector('showConnectionsMenu');
 export const editorInteractionStateShowGoToMenuAtom = createSelector('showGoToMenu');
 export const editorInteractionStateShowFeedbackMenuAtom = createSelector('showFeedbackMenu');
-export const editorInteractionStateShowNewFileMenuAtom = createSelector('showNewFileMenu');
 export const editorInteractionStateShowRenameFileMenuAtom = createSelector('showRenameFileMenu');
 export const editorInteractionStateShowShareFileMenuAtom = createSelector('showShareFileMenu');
 export const editorInteractionStateShowSearchAtom = createSelector('showSearch');
diff --git a/quadratic-client/src/app/helpers/codeCellLanguage.ts b/quadratic-client/src/app/helpers/codeCellLanguage.ts
index 6de5556309..b403c2fdce 100644
--- a/quadratic-client/src/app/helpers/codeCellLanguage.ts
+++ b/quadratic-client/src/app/helpers/codeCellLanguage.ts
@@ -2,7 +2,7 @@ import { CodeCellLanguage } from '@/app/quadratic-core-types';
 
 export type CodeCellType = 'Python' | 'Javascript' | 'Formula' | 'Connection';
 
-const codeCellsById = {
+export const codeCellsById = {
   Formula: { id: 'Formula', label: 'Formula', type: undefined },
   Javascript: { id: 'Javascript', label: 'JavaScript', type: undefined },
   Python: { id: 'Python', label: 'Python', type: undefined },
diff --git a/quadratic-client/src/app/ui/QuadraticUI.tsx b/quadratic-client/src/app/ui/QuadraticUI.tsx
index 4624fdc5d9..78e7b2f1e1 100644
--- a/quadratic-client/src/app/ui/QuadraticUI.tsx
+++ b/quadratic-client/src/app/ui/QuadraticUI.tsx
@@ -1,7 +1,6 @@
 import { hasPermissionToEditFile } from '@/app/actions';
 import {
   editorInteractionStatePermissionsAtom,
-  editorInteractionStateShowNewFileMenuAtom,
   editorInteractionStateShowRenameFileMenuAtom,
   editorInteractionStateShowShareFileMenuAtom,
 } from '@/app/atoms/editorInteractionStateAtom';
@@ -12,7 +11,6 @@ import { FileDragDropWrapper } from '@/app/ui/components/FileDragDropWrapper';
 import { useFileContext } from '@/app/ui/components/FileProvider';
 import { PermissionOverlay } from '@/app/ui/components/PermissionOverlay';
 import PresentationModeHint from '@/app/ui/components/PresentationModeHint';
-import { useConnectionsFetcher } from '@/app/ui/hooks/useConnectionsFetcher';
 import { AIAnalyst } from '@/app/ui/menus/AIAnalyst/AIAnalyst';
 import { BottomBar } from '@/app/ui/menus/BottomBar/BottomBar';
 import CellTypeMenu from '@/app/ui/menus/CellTypeMenu';
@@ -26,27 +24,20 @@ import { TopBar } from '@/app/ui/menus/TopBar/TopBar';
 import { ValidationPanel } from '@/app/ui/menus/Validations/ValidationPanel';
 import { QuadraticSidebar } from '@/app/ui/QuadraticSidebar';
 import { UpdateAlertVersion } from '@/app/ui/UpdateAlertVersion';
-import { NewFileDialog } from '@/dashboard/components/NewFileDialog';
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { DialogRenameItem } from '@/shared/components/DialogRenameItem';
 import { ShareFileDialog } from '@/shared/components/ShareDialog';
 import { UserMessage } from '@/shared/components/UserMessage';
-import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { useMemo } from 'react';
 import { useNavigation, useParams } from 'react-router';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 export default function QuadraticUI() {
   const { isAuthenticated } = useRootRouteLoaderData();
-  const {
-    team: { uuid: teamUuid },
-  } = useFileRouteLoaderData();
-  const connectionsFetcher = useConnectionsFetcher();
   const navigation = useNavigation();
   const { uuid } = useParams() as { uuid: string };
   const { name, renameFile } = useFileContext();
   const [showShareFileMenu, setShowShareFileMenu] = useRecoilState(editorInteractionStateShowShareFileMenuAtom);
-  const [showNewFileMenu, setShowNewFileMenu] = useRecoilState(editorInteractionStateShowNewFileMenuAtom);
   const [showRenameFileMenu, setShowRenameFileMenu] = useRecoilState(editorInteractionStateShowRenameFileMenuAtom);
   const presentationMode = useRecoilValue(presentationModeAtom);
   const permissions = useRecoilValue(editorInteractionStatePermissionsAtom);
@@ -93,14 +84,6 @@ export default function QuadraticUI() {
       {/* Global overlay menus */}
       <FeedbackMenu />
       {showShareFileMenu && <ShareFileDialog onClose={() => setShowShareFileMenu(false)} name={name} uuid={uuid} />}
-      {showNewFileMenu && (
-        <NewFileDialog
-          onClose={() => setShowNewFileMenu(false)}
-          isPrivate={true}
-          connections={connectionsFetcher.data ? connectionsFetcher.data.connections : []}
-          teamUuid={teamUuid}
-        />
-      )}
       {presentationMode && <PresentationModeHint />}
       <CellTypeMenu />
       <CommandPalette />
diff --git a/quadratic-client/src/app/ui/components/LanguageIcon.tsx b/quadratic-client/src/app/ui/components/LanguageIcon.tsx
index ed44bfe387..98660b6de6 100644
--- a/quadratic-client/src/app/ui/components/LanguageIcon.tsx
+++ b/quadratic-client/src/app/ui/components/LanguageIcon.tsx
@@ -25,9 +25,9 @@ export function LanguageIcon({ language, ...props }: LanguageIconProps) {
   ) : language && 'mysql'.startsWith(language) ? (
     <MysqlIcon {...props} sx={{ color: colors.languageMysql, ...internalSx }} />
   ) : language && 'mssql'.startsWith(language) ? (
-    <MssqlIcon sx={{ color: colors.languageMssql, ...internalSx }} />
+    <MssqlIcon {...props} sx={{ color: colors.languageMssql, ...internalSx }} />
   ) : language && 'snowflake'.startsWith(language) ? (
-    <SnowflakeIcon sx={{ color: colors.languageSnowflake, ...internalSx }} />
+    <SnowflakeIcon {...props} sx={{ color: colors.languageSnowflake, ...internalSx }} />
   ) : (
     <Subject {...props} />
   );
diff --git a/quadratic-client/src/app/ui/icons/index.tsx b/quadratic-client/src/app/ui/icons/index.tsx
index bf316fbb28..63b6149e90 100644
--- a/quadratic-client/src/app/ui/icons/index.tsx
+++ b/quadratic-client/src/app/ui/icons/index.tsx
@@ -70,44 +70,42 @@ export const MysqlIcon = (props: SvgIconProps) => (
 
 export const MssqlIcon = (props: SvgIconProps) => (
   <SvgIcon {...props}>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="480px" height="480px">
-      <path
-        fill="#cfd8dc"
-        d="M23.084,11.277c-1.633-2.449-1.986-5.722-2.063-7.067c-4.148,0.897-8.269,2.506-8.031,3.691 c0.03,0.149,0.218,0.328,0.53,0.502l-0.488,0.873c-0.596-0.334-0.931-0.719-1.022-1.179c-0.269-1.341,1.25-2.554,4.642-3.709 c2.316-0.789,4.652-1.26,4.751-1.279l0.597-0.12L22,3.6c0,0.042,0.026,4.288,1.916,7.123L23.084,11.277z"
-      />
-      <path
-        fill="#cfd8dc"
-        d="M24.751,43H24.5c-8.192,0-17.309-2.573-18.386-6.879c-0.657-2.63,1.492-5.536,6.214-8.401 l0.52,0.854c-4.249,2.579-6.296,5.172-5.763,7.305c0.935,3.738,9.575,6.068,17.153,6.12c0.901-1.347,5.742-9.26,2.979-19.873 l0.967-0.252c3.149,12.092-3.218,20.837-3.282,20.924L24.751,43z"
-      />
-      <path
-        fill="#cfd8dc"
-        d="M9.931,39.306c-0.539,0-0.806-0.059-0.85-0.07c-0.176-0.043-0.314-0.178-0.362-0.352 c-0.049-0.174,0.001-0.361,0.129-0.488c0.072-0.072,7.197-7.208,8.159-12.978l0.986,0.164c-0.827,4.964-5.715,10.623-7.656,12.707 c1.939-0.111,6.835-1.019,16.234-6.28c-7.335-0.804-8.495-6.676-8.507-6.739l0.983-0.181c0.047,0.246,1.226,6.011,9.244,6.011 c0.003,0,0.005,0,0.008,0l0,0c0.227,0,0.424,0.152,0.482,0.37c0.06,0.218-0.036,0.449-0.231,0.563 C17.315,38.542,11.867,39.305,9.931,39.306z"
-      />
-      <path
-        fill="#cfd8dc"
-        d="M14.524,41.7c-0.207,0-0.395-0.128-0.468-0.325c-0.079-0.211-0.007-0.45,0.177-0.582 c0.034-0.025,1.813-1.338,3.706-4.228c-0.728-0.322-1.465-0.698-2.196-1.137c-0.888-0.533-1.559-1.105-2.06-1.691 c-2.57,0.678-4.942,0.946-7.025,0.769l0.084-0.996c1.876,0.159,4.009-0.063,6.321-0.64c-1.573-2.688-0.129-5.356-0.109-5.392 l0.874,0.487c-0.067,0.122-1.265,2.37,0.249,4.633c2.201-0.632,4.549-1.567,6.979-2.782c0.559-1.835,0.996-3.922,1.225-6.276 c0.016-0.161,0.108-0.304,0.248-0.385s0.311-0.088,0.458-0.021c0.032,0.015,3.264,1.491,5.604,2.454 c0.17,0.07,0.288,0.228,0.307,0.411c0.02,0.183-0.063,0.361-0.216,0.465c-2.289,1.56-4.563,2.913-6.778,4.042 c-0.702,2.225-1.571,4.077-2.459,5.591c3.702,1.383,6.915,1.404,6.956,1.404c0.228,0,0.427,0.154,0.484,0.375 c0.057,0.221-0.042,0.452-0.241,0.563c-4.54,2.522-11.767,3.232-12.072,3.261C14.556,41.699,14.54,41.7,14.524,41.7z M18.909,36.967c-1.04,1.614-2.062,2.773-2.826,3.53c1.998-0.294,5.501-0.938,8.408-2.139 C23.099,38.187,21.084,37.807,18.909,36.967z M14.767,33.431c0.393,0.392,0.883,0.775,1.49,1.14 c0.736,0.442,1.483,0.817,2.22,1.135c0.754-1.264,1.501-2.781,2.142-4.568C18.598,32.1,16.636,32.868,14.767,33.431z M23.202,24.329c-0.205,1.768-0.521,3.381-0.913,4.85c1.66-0.885,3.354-1.896,5.062-3.026 C25.802,25.497,24.099,24.734,23.202,24.329z"
-      />
-      <path
-        fill="#cfd8dc"
-        d="M17.924,10.6c-0.117,0-0.233-0.042-0.325-0.12c-1.61-1.378-3.505-4.182-3.585-4.301 c-0.129-0.191-0.109-0.446,0.046-0.616c0.154-0.171,0.408-0.211,0.608-0.102c0.011,0.003,0.938,0.385,7.217,1.431 c0.181,0.03,0.33,0.156,0.39,0.328c0.061,0.172,0.022,0.364-0.1,0.5c-1.758,1.953-3.979,2.813-4.073,2.848 C18.044,10.589,17.983,10.6,17.924,10.6z M15.647,6.746c0.631,0.849,1.54,1.996,2.372,2.769c0.511-0.233,1.657-0.818,2.744-1.798 C18.18,7.276,16.604,6.962,15.647,6.746z"
-      />
-      <path
-        fill="#b71c1c"
-        d="M21.843,24.4c-0.068,0-0.137-0.014-0.201-0.042c-0.199-0.088-0.319-0.294-0.296-0.51 c0.292-2.749-3.926-3.852-3.969-3.862c-0.174-0.044-0.312-0.179-0.359-0.352s0.002-0.359,0.129-0.486 c0.207-0.207,5.139-5.098,11.327-7.784c0.173-0.075,0.369-0.047,0.515,0.07c0.145,0.118,0.212,0.307,0.174,0.489 c-1.186,5.744-6.71,12.044-6.944,12.309C22.12,24.341,21.982,24.4,21.843,24.4z M18.455,19.285 c1.184,0.445,3.258,1.475,3.783,3.356c1.449-1.808,4.542-5.973,5.697-9.934C23.548,14.817,19.854,17.999,18.455,19.285z"
-      />
-      <path
-        fill="#b71c1c"
-        d="M13.079,28.36l-0.475-0.88c1.883-1.015,4.04-2.883,5.807-5.054c-1.504,1.03-2.365,1.735-2.392,1.758 l-0.639-0.77c0.039-0.032,1.764-1.447,4.631-3.22c0.787-1.266,1.392-2.568,1.703-3.816c0.053-0.212,0.099-0.417,0.136-0.615 c-1.925-0.687-3.701-1.094-4.921-1.269c-0.185-0.026-0.339-0.153-0.401-0.328c-0.062-0.175-0.021-0.371,0.104-0.507 c0.085-0.092,2.116-2.268,4.654-3.463c0.197-0.093,0.433-0.047,0.581,0.114c0.067,0.073,1.44,1.615,1.091,4.805 c1.155,0.45,2.345,0.997,3.491,1.648c2.759-1.24,5.892-2.356,9.229-3.03c0.172-0.034,0.363,0.028,0.481,0.168 c0.117,0.14,0.149,0.333,0.083,0.503c-1.3,3.332-4.786,6.891-4.934,7.041c-0.101,0.102-0.239,0.153-0.383,0.148 c-0.143-0.008-0.275-0.076-0.365-0.188c-1.12-1.408-2.584-2.574-4.163-3.523c-2.175,1.004-4.101,2.078-5.684,3.049 C18.693,24.084,15.644,26.979,13.079,28.36z M27.492,17.396c1.29,0.832,2.491,1.81,3.484,2.948 c0.828-0.898,2.815-3.168,3.942-5.422C32.268,15.532,29.76,16.415,27.492,17.396z M22.799,16.122 c-0.033,0.163-0.071,0.33-0.113,0.5c-0.21,0.839-0.544,1.701-0.972,2.561c1.096-0.626,2.309-1.272,3.618-1.898 C24.494,16.841,23.639,16.455,22.799,16.122z M18.048,13.672c1.111,0.218,2.48,0.574,3.941,1.086 c0.152-1.843-0.346-2.972-0.647-3.472C19.966,12.004,18.761,13.014,18.048,13.672z"
-      />
-      <path
-        fill="#b71c1c"
-        d="M18.05,18.5c0,4.38-3.65,7.86-6.28,10.4c-0.44,0.43-1.93,0.5-1.93,0.5 c0.37-0.38,0.79-0.78,1.24-1.21c2.5-2.42,5.97-5.73,5.97-9.69c0-4.69-1.89-6.54-3.38-8.02c-0.66-0.67-1.22-1.31-1.56-2.09 l0.31-0.13c0.34,0.15,0.73,0.32,1.03,0.45c0.24,0.35,0.56,0.69,0.93,1.06C15.91,11.3,18.05,13.4,18.05,18.5z"
-      />
-      <path
-        fill="#b71c1c"
-        d="M42.935,19.794c0,0-0.605,0.086-0.775,0.106c-8.76,0.97-17.8,3.49-22.97,5.56 c-1.87,0.75-3.81,1.66-5.58,2.68c-0.01,0.01-0.02,0.01-0.04,0.02C12.53,28.76,10,30,7.95,31.09c3-3.19,8.62-5.65,10.86-6.55 c5.07-2.03,13.78-4.48,22.35-5.53c-1.01-1.18-3.48-3.68-8.34-5.54c-2.84-1.1-7.16-1.72-10.97-2.27c-6.06-0.87-9.51-1.45-9.84-3.1 c-0.07-0.33-0.02-0.66,0.13-0.98c0.33,0.54,0.8,0.92,1.11,1.14c0.15,0.1,0.26,0.16,0.3,0.18l0.01,0.01 c1.42,0.75,5.25,1.3,8.44,1.76c3.86,0.56,8.23,1.19,11.18,2.32c6.87,2.65,9.24,6.44,9.34,6.6 C42.61,19.28,42.935,19.794,42.935,19.794z"
-      />
-    </svg>
+    <path
+      d="M11.7154 4.97143C10.7359 3.50244 10.5242 1.53918 10.478 0.732398C7.98987 1.27045 5.51795 2.23558 5.66071 2.94639C5.67871 3.03576 5.79147 3.14313 5.97862 3.24751L5.6859 3.77116C5.3284 3.57082 5.12746 3.33988 5.07287 3.06396C4.91152 2.25958 5.82267 1.53198 7.85731 0.839169C9.24652 0.365899 10.6477 0.083377 10.7071 0.0719801L11.0652 0V0.366499C11.0652 0.391692 11.0808 2.93859 12.2145 4.63912L11.7154 4.97143Z"
+      fill="#CFD8DC"
+    />
+    <path
+      d="M12.7154 24H12.5648C7.65094 24 2.18225 22.4566 1.53623 19.8737C1.14214 18.2962 2.43118 16.553 5.2636 14.8345L5.57552 15.3468C3.02682 16.8937 1.79896 18.4491 2.11867 19.7286C2.67951 21.9708 7.86209 23.3684 12.4076 23.3996C12.9481 22.5916 15.8519 17.8451 14.1945 11.479L14.7746 11.3279C16.6635 18.5811 12.8443 23.8266 12.8059 23.8788L12.7154 24Z"
+      fill="#CFD8DC"
+    />
+    <path
+      d="M3.826 21.7842C3.50269 21.7842 3.34253 21.7488 3.31614 21.7422C3.21057 21.7164 3.12779 21.6354 3.099 21.531C3.06961 21.4267 3.0996 21.3145 3.17638 21.2383C3.21957 21.1951 7.49339 16.9147 8.07043 13.4537L8.66187 13.552C8.16581 16.5296 5.23381 19.9241 4.06953 21.1741C5.23261 21.1076 8.1694 20.5629 13.8073 17.4072C9.40746 16.9249 8.71166 13.4027 8.70446 13.3649L9.2941 13.2563C9.32229 13.4039 10.0295 16.8619 14.839 16.8619C14.8408 16.8619 14.842 16.8619 14.8438 16.8619C14.9799 16.8619 15.0981 16.9531 15.1329 17.0839C15.1689 17.2146 15.1113 17.3532 14.9943 17.4216C8.25518 21.3259 4.98728 21.7836 3.826 21.7842Z"
+      fill="#CFD8DC"
+    />
+    <path
+      d="M6.58158 23.2202C6.45742 23.2202 6.34465 23.1434 6.30086 23.0252C6.25347 22.8987 6.29666 22.7553 6.40703 22.6761C6.42743 22.6611 7.49453 21.8736 8.63002 20.14C8.19334 19.9469 7.75126 19.7214 7.31278 19.458C6.78013 19.1383 6.37764 18.7952 6.07712 18.4437C4.53555 18.8504 3.11274 19.0112 1.86328 18.905L1.91367 18.3075C3.03896 18.4029 4.31841 18.2698 5.70522 17.9236C4.76168 16.3113 5.62785 14.7109 5.63984 14.6893L6.1641 14.9815C6.12391 15.0546 5.40531 16.4031 6.31346 17.7605C7.63369 17.3814 9.04211 16.8206 10.4997 16.0918C10.835 14.9911 11.0971 13.7392 11.2345 12.3272C11.2441 12.2306 11.2993 12.1448 11.3833 12.0963C11.4672 12.0477 11.5698 12.0435 11.658 12.0837C11.6772 12.0927 13.6158 12.978 15.0195 13.5557C15.1214 13.5976 15.1922 13.6924 15.2036 13.8022C15.2156 13.912 15.1658 14.0187 15.074 14.0811C13.701 15.0168 12.337 15.8284 11.0084 16.5056C10.5873 17.8403 10.066 18.9512 9.53337 19.8593C11.754 20.6889 13.6812 20.7015 13.7058 20.7015C13.8426 20.7015 13.962 20.7939 13.9961 20.9264C14.0303 21.059 13.9709 21.1975 13.8516 21.2641C11.1283 22.7769 6.79332 23.2028 6.61037 23.2202C6.60078 23.2196 6.59118 23.2202 6.58158 23.2202ZM9.21186 20.3812C8.58803 21.3493 7.975 22.0445 7.51673 22.4986C8.7152 22.3222 10.8164 21.9359 12.5601 21.2155C11.7252 21.113 10.5165 20.885 9.21186 20.3812ZM6.72734 18.2602C6.96308 18.4953 7.257 18.725 7.6211 18.944C8.06258 19.2091 8.51065 19.434 8.95273 19.6248C9.40501 18.8666 9.85308 17.9566 10.2376 16.8847C9.02531 17.4618 7.84843 17.9224 6.72734 18.2602ZM11.7869 12.8005C11.664 13.861 11.4744 14.8285 11.2393 15.7097C12.235 15.1788 13.2511 14.5724 14.2757 13.8946C13.3465 13.5011 12.325 13.0434 11.7869 12.8005Z"
+      fill="#CFD8DC"
+    />
+    <path
+      d="M8.61993 4.56532C8.54975 4.56532 8.48017 4.54013 8.42499 4.49334C7.45925 3.66677 6.32257 1.98483 6.27458 1.91345C6.1972 1.79888 6.2092 1.64592 6.30217 1.54395C6.39455 1.44138 6.54691 1.41739 6.66687 1.48277C6.67347 1.48457 7.22952 1.71371 10.9959 2.34113C11.1045 2.35913 11.1938 2.43471 11.2298 2.53788C11.2664 2.64105 11.243 2.75622 11.1698 2.8378C10.1153 4.00927 8.78309 4.52513 8.7267 4.54613C8.69191 4.55872 8.65532 4.56532 8.61993 4.56532ZM7.25411 2.25356C7.63261 2.76282 8.17786 3.45083 8.67692 3.9145C8.98343 3.77474 9.67085 3.42383 10.3229 2.836C8.77349 2.57147 7.82815 2.38312 7.25411 2.25356Z"
+      fill="#CFD8DC"
+    />
+    <path
+      d="M10.9706 12.843C10.9298 12.843 10.8885 12.8346 10.8501 12.8178C10.7307 12.7651 10.6587 12.6415 10.6725 12.5119C10.8477 10.863 8.31757 10.2014 8.29178 10.1954C8.1874 10.169 8.10463 10.088 8.07643 9.98422C8.04824 9.88045 8.07763 9.76888 8.15381 9.6927C8.27798 9.56854 11.2364 6.63474 14.9481 5.02359C15.0519 4.9786 15.1695 4.99539 15.2571 5.06557C15.344 5.13635 15.3842 5.24972 15.3614 5.35889C14.65 8.80435 11.3365 12.5833 11.1962 12.7423C11.1368 12.8076 11.054 12.843 10.9706 12.843ZM8.9384 9.77488C9.6486 10.0418 10.8927 10.6596 11.2076 11.7879C12.0767 10.7034 13.932 8.20511 14.6248 5.82916C11.9934 7.09482 9.77757 9.00349 8.9384 9.77488Z"
+      fill="#B71C1C"
+    />
+    <path
+      d="M5.71363 15.2184L5.42871 14.6905C6.5582 14.0817 7.85204 12.9612 8.91195 11.659C8.0098 12.2768 7.49334 12.6997 7.47715 12.7135L7.09385 12.2516C7.11725 12.2324 8.15196 11.3836 9.87169 10.3201C10.3438 9.56075 10.7067 8.77976 10.8932 8.03117C10.925 7.904 10.9526 7.78104 10.9748 7.66227C9.8201 7.25018 8.7548 7.00605 8.023 6.90108C7.91203 6.88548 7.81965 6.80931 7.78246 6.70433C7.74527 6.59936 7.76987 6.4818 7.84485 6.40022C7.89583 6.34503 9.1141 5.03979 10.6365 4.32299C10.7546 4.26721 10.8962 4.2948 10.985 4.39137C11.0252 4.43516 11.8487 5.3601 11.6394 7.27358C12.3322 7.5435 13.046 7.87161 13.7334 8.26211C15.3884 7.51831 17.2677 6.84889 19.2693 6.44461C19.3725 6.42421 19.487 6.4614 19.5578 6.54538C19.628 6.62936 19.6472 6.74512 19.6076 6.8471C18.8278 8.84575 16.7368 10.9806 16.648 11.0705C16.5874 11.1317 16.5047 11.1623 16.4183 11.1593C16.3325 11.1545 16.2533 11.1137 16.1993 11.0465C15.5275 10.202 14.6494 9.50256 13.7022 8.93332C12.3976 9.53556 11.2423 10.1798 10.2928 10.7622C9.08111 12.6535 7.25221 14.39 5.71363 15.2184ZM14.3591 8.6418C15.1328 9.14086 15.8532 9.7275 16.4489 10.4101C16.9455 9.87146 18.1374 8.50984 18.8134 7.15781C17.2239 7.52371 15.7195 8.05336 14.3591 8.6418ZM11.544 7.87761C11.5242 7.97538 11.5014 8.07556 11.4762 8.17753C11.3503 8.68079 11.1499 9.19785 10.8932 9.71371C11.5506 9.33821 12.2782 8.95072 13.0634 8.57522C12.5607 8.30889 12.0479 8.07736 11.544 7.87761ZM8.69421 6.40802C9.36063 6.53878 10.1818 6.75232 11.0582 7.05944C11.1493 5.95394 10.8506 5.27673 10.6701 4.97681C9.84469 5.40749 9.12189 6.01332 8.69421 6.40802Z"
+      fill="#B71C1C"
+    />
+    <path
+      d="M8.69564 9.30405C8.69564 11.9313 6.50624 14.0188 4.92868 15.5423C4.66475 15.8003 3.771 15.8423 3.771 15.8423C3.99294 15.6143 4.24487 15.3744 4.51479 15.1165C6.01438 13.6649 8.09581 11.6794 8.09581 9.30405C8.09581 6.49083 6.96212 5.38113 6.06836 4.49338C5.67247 4.09149 5.33657 3.70759 5.13262 3.23972L5.31857 3.16174C5.52251 3.25172 5.75645 3.35369 5.9364 3.43167C6.08036 3.64161 6.27231 3.84556 6.49425 4.06749C7.41199 4.98524 8.69564 6.24489 8.69564 9.30405Z"
+      fill="#B71C1C"
+    />
+    <path
+      d="M23.6224 10.0802C23.6224 10.0802 23.2595 10.1318 23.1576 10.1438C17.903 10.7256 12.4805 12.2372 9.37935 13.4789C8.25766 13.9288 7.09398 14.4746 6.03227 15.0864C6.02627 15.0924 6.02028 15.0924 6.00828 15.0984C5.38445 15.4583 3.86687 16.2021 2.63721 16.8559C4.43671 14.9425 7.80778 13.4669 9.15141 12.927C12.1926 11.7094 17.4171 10.2398 22.5577 9.60994C21.9519 8.90214 20.4703 7.40255 17.5551 6.28686C15.8516 5.62704 13.2603 5.25514 10.9749 4.92523C7.33991 4.40338 5.27048 4.05547 5.07254 3.06574C5.03055 2.8678 5.06054 2.66985 5.15052 2.47791C5.34846 2.80182 5.63038 3.02975 5.81633 3.16172C5.90631 3.2217 5.97229 3.25769 5.99628 3.26969L6.00228 3.27569C6.85405 3.72556 9.15141 4.05547 11.0649 4.3314C13.3802 4.6673 16.0015 5.0452 17.771 5.72301C21.8919 7.31257 23.3135 9.58595 23.3735 9.68192C23.4275 9.7719 23.6224 10.0802 23.6224 10.0802Z"
+      fill="#B71C1C"
+    />
   </SvgIcon>
 );
 
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx
index 63c4e41ddf..1393019307 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarMenus/FileMenubarMenu.tsx
@@ -7,10 +7,9 @@ import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarMenus/MenubarItem
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { DeleteIcon, DraftIcon, FileCopyIcon } from '@/shared/components/Icons';
-import { ROUTES } from '@/shared/constants/routes';
 import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from '@/shared/shadcn/ui/menubar';
-import { Link, useSubmit } from 'react-router-dom';
+import { useSubmit } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
 // TODO: (enhancement) move these into `fileActionsSpec` by making the `.run()`
@@ -36,11 +35,9 @@ export const FileMenubarMenu = () => {
       <MenubarTrigger>File</MenubarTrigger>
       <MenubarContent className="pointer-move-ignore">
         {createNewFileAction.isAvailable(isAvailableArgs) && (
-          <MenubarItem asChild>
-            <Link to={ROUTES.CREATE_FILE_PRIVATE(teamUuid)} reloadDocument>
-              <DraftIcon />
-              {createNewFileAction.label}
-            </Link>
+          <MenubarItem onClick={() => createNewFileAction.run({ teamUuid })}>
+            <DraftIcon />
+            {createNewFileAction.label}
           </MenubarItem>
         )}
         {duplicateFileAction.isAvailable(isAvailableArgs) && (
diff --git a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
index 78edd624fa..ef77a3e653 100644
--- a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
+++ b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
@@ -103,7 +103,7 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
             My files
           </SidebarNavLink>
           <SidebarNavLinkCreateButton isPrivate={true} teamUuid={activeTeamUuid}>
-            New private file
+            New personal file
           </SidebarNavLinkCreateButton>
         </div>
         <SidebarNavLink to={ROUTES.FILES_SHARED_WITH_ME}>
diff --git a/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx b/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx
index f24c900e28..a2aed802ea 100644
--- a/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx
+++ b/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx
@@ -1,11 +1,16 @@
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { Empty } from '@/dashboard/components/Empty';
+import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
+import { ROUTES } from '@/shared/constants/routes';
 import { FileIcon } from '@radix-ui/react-icons';
 import mixpanel from 'mixpanel-browser';
-import { useSetRecoilState } from 'recoil';
+import { Link } from 'react-router-dom';
 
 export const FilesListEmptyState = ({ isPrivate = false }: { isPrivate?: boolean }) => {
-  const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
+  const {
+    activeTeam: {
+      team: { uuid: teamUuid },
+    },
+  } = useDashboardRouteLoaderData();
 
   return (
     <div className="flex min-h-80 items-center justify-center border-2 border-dashed border-border">
@@ -15,15 +20,15 @@ export const FilesListEmptyState = ({ isPrivate = false }: { isPrivate?: boolean
         description={
           <>
             You don’t have any files yet.{' '}
-            <button
+            <Link
+              to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}
               className="underline hover:text-primary"
               onClick={() => {
                 mixpanel.track('[FilesEmptyState].clickCreateBlankFile');
-                setNewFileDialogState({ show: true, isPrivate });
               }}
             >
               Create a new file
-            </button>{' '}
+            </Link>{' '}
             or drag and drop a CSV, Excel, Parquet, or Quadratic file here.
           </>
         }
diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index d34678dcaa..ff1ef8fb51 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -1,19 +1,13 @@
+import { codeCellsById } from '@/app/helpers/codeCellLanguage';
+import { supportedFileTypes } from '@/app/helpers/files';
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
-import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
-import { ApiIcon, ArrowDropDownIcon, DatabaseIcon, DraftIcon, ExamplesIcon, UndoIcon } from '@/shared/components/Icons';
+import { useFileImport } from '@/app/ui/hooks/useFileImport';
+import { SNIPPET_PY_API } from '@/app/ui/menus/CodeEditor/snippetsPY';
+import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
+import { ApiIcon, ArrowDropDownIcon, DatabaseIcon, DraftIcon, ExamplesIcon } from '@/shared/components/Icons';
 import { ROUTES } from '@/shared/constants/routes';
 import { Button } from '@/shared/shadcn/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/shared/shadcn/ui/dialog';
+import { Dialog } from '@/shared/shadcn/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,24 +16,40 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/shared/shadcn/ui/dropdown-menu';
-import { Input } from '@/shared/shadcn/ui/input';
-import { Label } from '@/shared/shadcn/ui/label';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
-import { cn } from '@/shared/shadcn/utils';
-import { useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
+import { useRef } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+const stateToInsertAndRun = { language: 'Python', codeString: SNIPPET_PY_API } as const;
 
 export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
-  const { teamUuid } = useParams() as { teamUuid: string };
-  const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
-  const setFileDragDropState = useSetRecoilState(fileDragDropModalAtom);
+  const {
+    activeTeam: {
+      connections,
+      team: { uuid: teamUuid },
+    },
+  } = useDashboardRouteLoaderData();
+  const navigate = useNavigate();
+  const handleFileImport = useFileImport();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   return (
     <div className="flex flex-row-reverse gap-2">
       <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}>
         <Button variant="default">New file</Button>
       </Link>
+      <input
+        ref={fileInputRef}
+        type="file"
+        hidden
+        multiple
+        accept={supportedFileTypes.join(',')}
+        onChange={(e) => {
+          const files = e.target.files;
+          if (files) {
+            handleFileImport({ files, isPrivate, teamUuid });
+          }
+        }}
+      />
       <Dialog>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -49,28 +59,34 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuLabel className="text-xs text-muted-foreground">Data from…</DropdownMenuLabel>
-            <DropdownMenuItem onClick={() => setFileDragDropState({ show: true, isPrivate })}>
-              <DraftIcon className="mr-3 h-6 w-6 text-primary" />
-
+            <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
+              <DraftIcon className="mr-3 text-primary" />
               <span className="flex flex-col">
                 Local file
                 <span className="text-xs text-muted-foreground">.csv, .xlsx, .pqt, .grid</span>
               </span>
             </DropdownMenuItem>
-            <DialogTrigger asChild>
-              <DropdownMenuItem>
-                <ApiIcon className="mr-3 h-6 w-6 text-primary" />
 
+            <DropdownMenuItem asChild>
+              <Link
+                reloadDocument
+                to={
+                  isPrivate
+                    ? ROUTES.CREATE_FILE_PRIVATE(teamUuid, stateToInsertAndRun)
+                    : ROUTES.CREATE_FILE(teamUuid, stateToInsertAndRun)
+                }
+              >
+                <ApiIcon className="mr-3 text-primary" />
                 <span className="flex flex-col">
                   API
                   <span className="text-xs text-muted-foreground">Fetch data over HTTP with code</span>
                 </span>
-              </DropdownMenuItem>
-            </DialogTrigger>
+              </Link>
+            </DropdownMenuItem>
 
             <DropdownMenuItem asChild>
               <Link to="/examples" className="flex items-center">
-                <ExamplesIcon className="mr-3 h-6 w-6 text-primary" />
+                <ExamplesIcon className="mr-3 text-primary" />
 
                 <span className="flex flex-col">
                   Examples
@@ -80,223 +96,27 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuLabel className="text-xs text-muted-foreground">Data from connections</DropdownMenuLabel>
-            <DropdownMenuItem>
-              <LanguageIcon language="POSTGRES" style={{ width: '20px', height: '20px' }} className="mr-3 h-6 w-6" />
-              <span className="flex flex-col">
-                Quadratic (production)
-                <span className="text-xs text-muted-foreground">Postgres connection</span>
-              </span>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <LanguageIcon language="MYSQL" style={{ width: '20px', height: '20px' }} className="mr-3 h-6 w-6" />
-              <span className="flex flex-col">
-                Customer data
-                <span className="text-xs text-muted-foreground">MySQL connection</span>
-              </span>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="">
-              <DatabaseIcon className="mr-3 h-6 w-6 text-muted-foreground" /> See all connections...
+            {connections.map(({ uuid, name, type }) => {
+              const { label } = codeCellsById[type];
+              return (
+                <DropdownMenuItem key={uuid}>
+                  <LanguageIcon language={type} className="mr-3" />
+                  <span className="flex flex-col">
+                    {name}
+                    <span className="text-xs text-muted-foreground">{label}</span>
+                  </span>
+                </DropdownMenuItem>
+              );
+            })}
+
+            <DropdownMenuItem onClick={() => navigate(ROUTES.TEAM_CONNECTIONS(teamUuid))}>
+              <DatabaseIcon className="mr-3 text-muted-foreground" /> See all connections...
             </DropdownMenuItem>
           </DropdownMenuContent>
-          <DialogContentNewFileFromApi />
         </DropdownMenu>
       </Dialog>
-      <Button
-        className="hidden"
-        onClick={() => {
-          setNewFileDialogState({ show: true, isPrivate });
-        }}
-      >
-        New file
-      </Button>
     </div>
   );
 }
 
-type LoadState = 'idle' | 'loading' | 'error';
-function DialogContentNewFileFromApi({ children }: any) {
-  const [loadState, setLoadState] = useState<LoadState>('idle');
-  const [json, setJson] = useState<Record<string, any>>({
-    id: 'R7UfaahVfFd',
-    joke: 'My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.',
-    status: 200,
-  });
-  const defaultUrl = 'https://icanhazdadjoke.com';
-  const [url, setUrl] = useState(defaultUrl);
-  const [activeLanguage, setActiveLanguage] = useState('Javascript');
-
-  // TODO: needs better error handling
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    setLoadState('loading');
-    fetch(url, { headers: { Accept: 'application/json' } })
-      .then((res) => res.json())
-      .then((newJson) => {
-        setJson(newJson);
-        setLoadState('idle');
-      })
-      .catch((err) => {
-        setLoadState('error');
-      });
-  };
-
-  return (
-    <DialogContent className="max-w-2xl">
-      <DialogHeader>
-        <DialogTitle>Fetch data from an API</DialogTitle>
-        <DialogDescription>
-          This example shows how to fetch data and output it on the sheet. Once you create the file you can edit the
-          code however you wish, including custom headers, authentication, and more.
-        </DialogDescription>
-      </DialogHeader>
-      <div className="relative flex flex-col gap-2">
-        <form className="flex items-center justify-between gap-8 rounded-lg text-sm " onSubmit={handleSubmit}>
-          <div className="flex items-center gap-2 self-stretch rounded-md bg-accent p-0.5">
-            {['Python', 'Javascript'].map((language) => (
-              <Label
-                onClick={() => setActiveLanguage(language)}
-                className={`flex items-center gap-1 self-stretch rounded ${
-                  activeLanguage === language ? 'bg-background shadow-sm' : ''
-                } px-2`}
-              >
-                <LanguageIcon language={language} sx={{ fontSize: '20px' }} />
-                {language}
-              </Label>
-            ))}
-          </div>
-          <div className="flex flex-grow gap-2">
-            <Input value={url} onChange={(e) => setUrl(e.target.value)} />
-            <Button type="submit" variant="secondary" disabled={loadState === 'loading'}>
-              GET
-            </Button>
-          </div>
-        </form>
-        {loadState === 'error' && (
-          <div className="color-foreground absolute bottom-0 left-0 right-0 flex items-center justify-between gap-2 bg-destructive px-3 py-1 text-sm text-background">
-            Error retrieiving data. Start a file anyway to continue debugging.
-            <Tooltip>
-              <TooltipTrigger
-                className="flex items-center"
-                onClick={() => {
-                  setLoadState('idle');
-                  setUrl(defaultUrl);
-                }}
-              >
-                <UndoIcon />
-              </TooltipTrigger>
-              <TooltipContent>Reset</TooltipContent>
-            </Tooltip>
-          </div>
-        )}
-
-        <div className="border-l border-r border-t border-border p-3">
-          <pre className="text-xs">
-            {activeLanguage === 'Javascript'
-              ? `const res = await fetch(
-  "${url}",
-  { headers: { Accept: 'application/json' }
-});
-const json = await res.json();
-return [
-  Object.keys(json),
-  Object.values(json),
-];`
-              : `import requests
-import pandas as pd
-res = requests.get(
-  'https://icanhazdadjoke.com',
-  headers={"Accept": "application/json"}
-)
-df = pd.DataFrame([response.json()])
-keys = df.columns.tolist()
-values = df.iloc[0].tolist()
-[keys, values]
-`}
-          </pre>
-        </div>
-      </div>
-      <div className="-mt-8 overflow-hidden text-sm">
-        <table className="mt-4 w-full max-w-full table-auto border-separate border-spacing-0 border-l border-t border-gray-200 border-b-transparent border-r-transparent">
-          <thead>
-            <tr>
-              <TD as="th" isFirstCol={true}></TD>
-              <TD as="th">A</TD>
-              <TD as="th">B</TD>
-              <TD as="th">C</TD>
-              <TD as="th">D</TD>
-              <TD as="th">E</TD>
-              <TD as="th">F</TD>
-              <th>G</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <TD isFirstCol>1</TD>
-              {Object.keys(json).map((key) => (
-                <TD className="font-bold">{key}</TD>
-              ))}
-              <TD></TD>
-              <TD></TD>
-              <TD></TD>
-            </tr>
-            <tr>
-              <TD isFirstCol>2</TD>
-              {Object.values(json).map((value) => (
-                <TD>{typeof value === 'string' || typeof value === 'number' ? value : JSON.stringify(value)}</TD>
-              ))}
-              <TD></TD>
-              <TD></TD>
-              <TD></TD>
-            </tr>
-            <tr>
-              <TD isFirstCol>3</TD>
-              <TD></TD>
-              <TD></TD>
-              <TD></TD>
-              <TD></TD>
-              <TD></TD>
-              <TD></TD>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <DialogFooter>
-        <DialogClose>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button>Create file with API request</Button>
-      </DialogFooter>
-    </DialogContent>
-  );
-}
-
-function TD({
-  children,
-  as = 'td',
-  isFirstCol = false,
-  className,
-}: {
-  children?: React.ReactNode;
-  as?: 'td' | 'th';
-  isFirstCol?: boolean;
-  className?: string;
-}) {
-  const Component = as;
-
-  return (
-    <Component
-      className={cn(
-        'h-[20px] overflow-hidden whitespace-nowrap border-b border-r border-gray-200 leading-[20px]',
-        className,
-        isFirstCol
-          ? 'w-[30px] min-w-[30px] max-w-[30px] text-center text-xs font-medium text-muted-foreground'
-          : 'w-[100px] min-w-[100px] max-w-[100px]',
-        as === 'th' ? 'text-xs font-medium text-muted-foreground' : ''
-      )}
-    >
-      {children}
-    </Component>
-  );
-}
+// newNewFileFromStateConnection
diff --git a/quadratic-client/src/routes/teams.$teamUuid.files.private.tsx b/quadratic-client/src/routes/teams.$teamUuid.files.private.tsx
index ee1ce55938..54e893c5a3 100644
--- a/quadratic-client/src/routes/teams.$teamUuid.files.private.tsx
+++ b/quadratic-client/src/routes/teams.$teamUuid.files.private.tsx
@@ -35,7 +35,12 @@ export const Component = () => {
   return (
     <>
       <DashboardHeader title="My personal files" actions={<NewFileButton isPrivate={true} />} />
-      <FilesList files={files} emptyState={<FilesListEmptyState />} teamUuid={teamUuid} isPrivate={true} />
+      <FilesList
+        files={files}
+        emptyState={<FilesListEmptyState isPrivate={true} />}
+        teamUuid={teamUuid}
+        isPrivate={true}
+      />
     </>
   );
 };

From e134f93adead74c3df2dbcdc6352c4a8809057f6 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Wed, 13 Nov 2024 21:02:29 +0530
Subject: [PATCH 26/62] command palette, switch sheet

---
 .../inlineEditor/inlineEditorKeyboard.ts      | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index 1296b4c2f9..5dc029f172 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -326,6 +326,29 @@ class InlineEditorKeyboard {
       });
     }
 
+    // show command palette
+    else if (matchShortcut(Action.ShowCommandPalette, e)) {
+      e.stopPropagation();
+      e.preventDefault();
+      inlineEditorHandler.close(0, 0, false).then(() => {
+        defaultActionSpec[Action.ShowCommandPalette].run();
+      });
+    }
+
+    // switch sheet next
+    else if (matchShortcut(Action.SwitchSheetNext, e)) {
+      e.stopPropagation();
+      e.preventDefault();
+      defaultActionSpec[Action.SwitchSheetNext].run();
+    }
+
+    // switch sheet previous
+    else if (matchShortcut(Action.SwitchSheetPrevious, e)) {
+      e.stopPropagation();
+      e.preventDefault();
+      defaultActionSpec[Action.SwitchSheetPrevious].run();
+    }
+
     // trigger cell type menu
     else if (matchShortcut(Action.ShowCellTypeMenu, e) && inlineEditorMonaco.get().length === 0) {
       e.preventDefault();

From 941af165db9457bd1f812a6a0266239240e1e277 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Wed, 13 Nov 2024 14:11:50 -0700
Subject: [PATCH 27/62] updates

---
 .../dashboard/components/NewFileButton.tsx    | 42 ++++++---
 ...onnectionSchemaBrowserTableQueryAction.tsx | 45 +++++----
 .../connections/ConnectionSchemaBrowser.tsx   | 94 +++++++++----------
 3 files changed, 98 insertions(+), 83 deletions(-)

diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index ff1ef8fb51..f7bc6d6d39 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -6,6 +6,7 @@ import { SNIPPET_PY_API } from '@/app/ui/menus/CodeEditor/snippetsPY';
 import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
 import { ApiIcon, ArrowDropDownIcon, DatabaseIcon, DraftIcon, ExamplesIcon } from '@/shared/components/Icons';
 import { ROUTES } from '@/shared/constants/routes';
+import { newNewFileFromStateConnection } from '@/shared/hooks/useNewFileFromState';
 import { Button } from '@/shared/shadcn/ui/button';
 import { Dialog } from '@/shared/shadcn/ui/dialog';
 import {
@@ -19,6 +20,7 @@ import {
 import { useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
+const CONNECTIONS_DISPLAY_LIMIT = 3;
 const stateToInsertAndRun = { language: 'Python', codeString: SNIPPET_PY_API } as const;
 
 export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
@@ -96,27 +98,41 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuLabel className="text-xs text-muted-foreground">Data from connections</DropdownMenuLabel>
-            {connections.map(({ uuid, name, type }) => {
+            {connections.slice(0, CONNECTIONS_DISPLAY_LIMIT).map(({ uuid, name, type }) => {
               const { label } = codeCellsById[type];
+              const to = newNewFileFromStateConnection({
+                isPrivate,
+                teamUuid,
+                query: '',
+                connectionType: type,
+                connectionUuid: uuid,
+              });
               return (
-                <DropdownMenuItem key={uuid}>
-                  <LanguageIcon language={type} className="mr-3" />
-                  <span className="flex flex-col">
-                    {name}
-                    <span className="text-xs text-muted-foreground">{label}</span>
-                  </span>
+                <DropdownMenuItem key={uuid} asChild>
+                  <Link to={to}>
+                    <LanguageIcon language={type} className="mr-3" />
+                    <span className="flex flex-col">
+                      {name}
+                      <span className="text-xs text-muted-foreground">{label}</span>
+                    </span>
+                  </Link>
                 </DropdownMenuItem>
               );
             })}
-
-            <DropdownMenuItem onClick={() => navigate(ROUTES.TEAM_CONNECTIONS(teamUuid))}>
-              <DatabaseIcon className="mr-3 text-muted-foreground" /> See all connections...
-            </DropdownMenuItem>
+            {connections.length > CONNECTIONS_DISPLAY_LIMIT && (
+              <DropdownMenuItem onClick={() => navigate(ROUTES.TEAM_CONNECTIONS(teamUuid))}>
+                <DatabaseIcon className="mr-3 text-muted-foreground" />
+                <span className="flex flex-col">
+                  All connections
+                  <span className="text-xs text-muted-foreground">
+                    {connections.length - CONNECTIONS_DISPLAY_LIMIT} more
+                  </span>
+                </span>
+              </DropdownMenuItem>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       </Dialog>
     </div>
   );
 }
-
-// newNewFileFromStateConnection
diff --git a/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx b/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
index 910bba8261..b44f8093b7 100644
--- a/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
+++ b/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
@@ -1,8 +1,6 @@
-import { NewFileIcon } from '@/dashboard/components/CustomRadixIcons';
+import { useSaveAndRunCell } from '@/app/ui/menus/CodeEditor/hooks/useSaveAndRunCell';
 import { newNewFileFromStateConnection } from '@/shared/hooks/useNewFileFromState';
 import { Button } from '@/shared/shadcn/ui/button';
-import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
-import { ClipboardCopyIcon } from '@radix-ui/react-icons';
 import mixpanel from 'mixpanel-browser';
 import * as monaco from 'monaco-editor';
 import { ConnectionType } from 'quadratic-shared/typesAndSchemasConnections';
@@ -26,19 +24,17 @@ export const useConnectionSchemaBrowserTableQueryActionNewFile = ({
     TableQueryAction: ({ query }: { query: string }) => {
       const to = newNewFileFromStateConnection({ query, isPrivate, teamUuid, connectionType, connectionUuid });
       return (
-        <TooltipPopover label="New file querying this table">
-          <Button size="icon-sm" variant="ghost" asChild>
-            <Link
-              to={to}
-              className="hover:bg-background"
-              onClick={() => {
-                mixpanel.track('[Connections].schemaViewer.newFileFromTable');
-              }}
-            >
-              <NewFileIcon />
-            </Link>
+        <Link
+          to={to}
+          reloadDocument
+          onClick={() => {
+            mixpanel.track('[Connections].schemaViewer.newFileFromTable');
+          }}
+        >
+          <Button size="sm" variant="secondary" disabled={to.length === 0}>
+            New file querying selected table
           </Button>
-        </TooltipPopover>
+        </Link>
       );
     },
   };
@@ -50,12 +46,14 @@ export const useConnectionSchemaBrowserTableQueryActionInsertQuery = ({
   editorInst: monaco.editor.IStandaloneCodeEditor | null;
 }) => {
   return {
-    TableQueryAction: ({ query }: { query: string }) => (
-      <TooltipPopover label="Insert query">
+    TableQueryAction: ({ query }: { query: string }) => {
+      const { saveAndRunCell } = useSaveAndRunCell();
+      return (
         <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
+          className="flex-shrink-0"
+          variant="secondary"
+          size="sm"
+          disabled={query.length === 0}
           onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
             mixpanel.track('[Connections].schemaViewer.insertQuery');
 
@@ -72,12 +70,13 @@ export const useConnectionSchemaBrowserTableQueryActionInsertQuery = ({
               ]);
 
               editorInst.focus();
+              saveAndRunCell();
             }
           }}
         >
-          <ClipboardCopyIcon />
+          Query selected table
         </Button>
-      </TooltipPopover>
-    ),
+      );
+    },
   };
 };
diff --git a/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx b/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx
index b9c892bfd5..ad8166a349 100644
--- a/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx
+++ b/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx
@@ -1,15 +1,16 @@
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
+import { ChevronRightIcon, RefreshIcon } from '@/shared/components/Icons';
 import { Type } from '@/shared/components/Type';
 import { ROUTES } from '@/shared/constants/routes';
 import { CONTACT_URL } from '@/shared/constants/urls';
 import { useConnectionSchemaBrowser } from '@/shared/hooks/useConnectionSchemaBrowser';
 import { Button } from '@/shared/shadcn/ui/button';
+import { Label } from '@/shared/shadcn/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/shared/shadcn/ui/radio-group';
 import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
-import { KeyboardArrowRight } from '@mui/icons-material';
-import { ReloadIcon } from '@radix-ui/react-icons';
 import { ConnectionType } from 'quadratic-shared/typesAndSchemasConnections';
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 export const ConnectionSchemaBrowser = ({
@@ -26,6 +27,7 @@ export const ConnectionSchemaBrowser = ({
   uuid?: string;
 }) => {
   const { data, isLoading, reloadSchema } = useConnectionSchemaBrowser({ type, uuid });
+  const [selectedTableIndex, setSelectedTableIndex] = useState<number>(0);
 
   if (type === undefined || uuid === undefined) return null;
 
@@ -34,20 +36,22 @@ export const ConnectionSchemaBrowser = ({
     <div
       className={cn('h-full overflow-auto text-sm', selfContained && 'h-96 overflow-auto rounded border border-border')}
     >
-      <div className={cn('flex items-center justify-between pb-1', selfContained ? 'px-2 pt-1.5' : 'px-2')}>
+      <div className={cn('sticky top-0 z-10 flex items-center justify-between bg-background px-2 py-1.5')}>
         <div className="flex items-center gap-1 truncate">
           {data && data.type ? (
-            <div className="flex h-6 w-6 items-center ">
+            <div className="flex h-6 w-6 flex-shrink-0 items-center">
               <LanguageIcon language={data.type} sx={{ width: 15, height: 15 }} />
             </div>
           ) : null}
           <h3 className="truncate font-medium tracking-tight">{data?.name ? data.name : ''}</h3>
         </div>
-        <div className="flex items-center gap-1">
-          {/* <Type variant="caption">{data?.tables ? data.tables.length + ' tables' : ''}</Type> */}
+        <div className="flex flex-row-reverse items-center gap-1">
+          <TableQueryAction
+            query={data ? getTableQuery({ table: data.tables[selectedTableIndex], connectionKind: data.type }) : ''}
+          />
           <TooltipPopover label="Reload schema">
-            <Button onClick={reloadSchema} variant="ghost" size="icon-sm">
-              <ReloadIcon className={isLoading ? 'animate-spin' : ''} />
+            <Button onClick={reloadSchema} variant="ghost" size="icon-sm" className="text-muted-foreground">
+              <RefreshIcon className={cn(isLoading && 'animate-spin')} />
             </Button>
           </TooltipPopover>
         </div>
@@ -55,17 +59,20 @@ export const ConnectionSchemaBrowser = ({
       {isLoading && data === undefined && (
         <div className="mb-4 flex min-h-16 items-center justify-center text-muted-foreground">Loading…</div>
       )}
+
       {data && (
-        <ul className="text-sm">
+        <RadioGroup
+          value={String(selectedTableIndex)}
+          onValueChange={(newIndexStr) => {
+            const newIndex = Number(newIndexStr);
+            setSelectedTableIndex(newIndex);
+          }}
+          className="block"
+        >
           {data.tables.map((table, i) => (
-            <TableListItem
-              selfContained={selfContained}
-              data={table}
-              key={i}
-              tableQuery={<TableQueryAction query={getTableQuery({ table, connectionKind: data.type })} />}
-            />
+            <TableListItem index={i} selfContained={selfContained} data={table} key={i} />
           ))}
-        </ul>
+        </RadioGroup>
       )}
       {data === null && (
         <div className="mx-auto my-2 flex max-w-md flex-col items-center justify-center gap-2 pb-4 text-center text-sm text-muted-foreground">
@@ -113,60 +120,53 @@ type Column = {
 };
 
 function TableListItem({
+  index,
   data: { name, columns, schema },
   selfContained,
-  tableQuery,
 }: {
+  index: number;
   data: Table;
   selfContained?: boolean;
-  tableQuery: ReactNode;
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const id = `sql-table-${index}`;
 
   return (
-    <li className="group relative z-10">
-      <div className={cn('sticky top-0', isExpanded && 'z-10 bg-accent')}>
+    <div className="group">
+      <Label
+        htmlFor={id}
+        className={cn('flex items-center justify-between group-has-[button[data-state=checked]]:bg-accent')}
+      >
         <button
           className={cn(
-            'z-10 flex h-8 w-full cursor-default items-stretch justify-between gap-1 bg-background group-hover:bg-accent',
-            isExpanded && 'bg-accent',
-            selfContained ? 'px-2' : 'px-1'
+            'flex h-8 min-w-0 flex-initial cursor-default items-center font-normal',
+            selfContained ? 'px-2' : 'px-1.5'
           )}
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation();
             setIsExpanded((prev) => !prev);
           }}
         >
-          <div className="flex items-center truncate">
-            <div className="flex h-6 w-6 items-center justify-center">
-              <KeyboardArrowRight
-                fontSize="inherit"
-                className={cn(isExpanded && 'rotate-90', 'text-xs text-muted-foreground')}
-              />
-            </div>
-            <div className="truncate">{name}</div>
+          <div className="flex h-6 w-6 flex-none items-center">
+            <ChevronRightIcon className={cn('text-muted-foreground', isExpanded && 'rotate-90')} />
           </div>
+          <div className="truncate leading-normal">{name}</div>
+          <div className="ml-2 flex flex-none items-center text-xs text-muted-foreground">{columns.length} cols</div>
         </button>
-        <div
-          className={cn(
-            `absolute top-0.5 z-10 hidden group-hover:block`,
-            isExpanded && 'block',
-            selfContained ? 'right-2' : 'right-2'
-          )}
-        >
-          {tableQuery}
-        </div>
-      </div>
+
+        <RadioGroupItem value={String(index)} id={id} className="ml-4 mr-3 cursor-default" />
+      </Label>
       {isExpanded && (
-        <ul className={cn('pr-2', selfContained ? 'pl-5' : 'pl-4')}>
+        <ul className={cn('pl-8 pr-2')}>
           {columns.length ? (
             columns.map(({ name, type, is_nullable }, k) => (
-              <li key={k} className="border border-l border-transparent border-l-border pl-3">
+              <li key={k} className="border border-l border-transparent border-l-border pl-0">
                 <div className="flex w-full items-center gap-1 py-0.5 pl-2">
                   <div className="truncate after:ml-1 after:text-muted-foreground after:opacity-30 after:content-['/']">
                     {name}
                   </div>
 
-                  <div className="flex items-center gap-1 font-mono text-sm text-muted-foreground">
+                  <div className="flex items-center gap-1 font-mono text-xs text-muted-foreground">
                     {type}
                     {is_nullable && '?'}
                   </div>
@@ -180,7 +180,7 @@ function TableListItem({
           )}
         </ul>
       )}
-    </li>
+    </div>
   );
 }
 

From aa763821b8c1c69628763976c7516606c488a6f6 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Wed, 13 Nov 2024 14:20:22 -0700
Subject: [PATCH 28/62] Update FileDragDrop.tsx

---
 quadratic-client/src/dashboard/components/FileDragDrop.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/quadratic-client/src/dashboard/components/FileDragDrop.tsx b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
index 5c5741eaa9..a8f61c1281 100644
--- a/quadratic-client/src/dashboard/components/FileDragDrop.tsx
+++ b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
@@ -1,6 +1,5 @@
 import { useFileImport } from '@/app/ui/hooks/useFileImport';
 import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
-import { CloseIcon } from '@/shared/components/Icons';
 import { cn } from '@/shared/shadcn/utils';
 import { DragEvent, useCallback } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -42,10 +41,6 @@ export function FileDragDrop({ className }: FileDragDropProps) {
     [fileDragDropModal, handleFileImport, setFileDragDropModal, setNewFileDialogState]
   );
 
-  const handleClose = useCallback(() => {
-    setFileDragDropModal({ show: false, teamUuid: undefined, isPrivate: undefined });
-  }, [setFileDragDropModal]);
-
   if (!fileDragDropModal.show) return null;
 
   return (
@@ -55,7 +50,6 @@ export function FileDragDrop({ className }: FileDragDropProps) {
         'fixed left-0 top-0 z-20 flex h-full w-full flex-col items-center justify-center bg-white opacity-90',
         className
       )}
-      onClick={handleClose}
       onDragEnter={handleDrag}
       onDragLeave={handleDrag}
       onDragOver={handleDrag}
@@ -73,7 +67,6 @@ export function FileDragDrop({ className }: FileDragDropProps) {
           </span>
         </div>
       </div>
-      <CloseIcon className="absolute right-6 top-6 z-20 text-muted-foreground" />
     </div>
   );
 }

From cba19c53aeda0e2acbc8f6ea9a44e4319e109085 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Thu, 14 Nov 2024 12:01:03 -0700
Subject: [PATCH 29/62] Update NewFileButton.tsx

---
 .../src/dashboard/components/NewFileButton.tsx    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index f7bc6d6d39..4670d8f3e4 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -4,7 +4,7 @@ import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { useFileImport } from '@/app/ui/hooks/useFileImport';
 import { SNIPPET_PY_API } from '@/app/ui/menus/CodeEditor/snippetsPY';
 import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
-import { ApiIcon, ArrowDropDownIcon, DatabaseIcon, DraftIcon, ExamplesIcon } from '@/shared/components/Icons';
+import { AddIcon, ApiIcon, ArrowDropDownIcon, DatabaseIcon, DraftIcon, ExamplesIcon } from '@/shared/components/Icons';
 import { ROUTES } from '@/shared/constants/routes';
 import { newNewFileFromStateConnection } from '@/shared/hooks/useNewFileFromState';
 import { Button } from '@/shared/shadcn/ui/button';
@@ -109,7 +109,7 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
               });
               return (
                 <DropdownMenuItem key={uuid} asChild>
-                  <Link to={to}>
+                  <Link to={to} reloadDocument>
                     <LanguageIcon language={type} className="mr-3" />
                     <span className="flex flex-col">
                       {name}
@@ -123,13 +123,22 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
               <DropdownMenuItem onClick={() => navigate(ROUTES.TEAM_CONNECTIONS(teamUuid))}>
                 <DatabaseIcon className="mr-3 text-muted-foreground" />
                 <span className="flex flex-col">
-                  All connections
+                  View all connections
                   <span className="text-xs text-muted-foreground">
                     {connections.length - CONNECTIONS_DISPLAY_LIMIT} more
                   </span>
                 </span>
               </DropdownMenuItem>
             )}
+            {connections.length === 0 && (
+              <DropdownMenuItem onClick={() => navigate(ROUTES.TEAM_CONNECTIONS(teamUuid))}>
+                <AddIcon className="mr-3 text-muted-foreground" />
+                <span className="flex flex-col">
+                  Add a connection
+                  <span className="text-xs text-muted-foreground">Postgres, SQL, Snowflake, & more</span>
+                </span>
+              </DropdownMenuItem>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       </Dialog>

From fc5f56595478d0e65fd2072a47db9e7cd415f69f Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Sun, 17 Nov 2024 09:13:15 +0530
Subject: [PATCH 30/62] fix: deleted code cell artifacts still showing up

---
 .../controller/execution/receive_multiplayer.rs    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/quadratic-core/src/controller/execution/receive_multiplayer.rs b/quadratic-core/src/controller/execution/receive_multiplayer.rs
index 6534dd3889..9db0b5f43a 100644
--- a/quadratic-core/src/controller/execution/receive_multiplayer.rs
+++ b/quadratic-core/src/controller/execution/receive_multiplayer.rs
@@ -224,7 +224,7 @@ impl GridController {
     /// Received transactions from the server
     pub fn received_transactions(&mut self, transactions: Vec<TransactionServer>) {
         // used to track client changes when combining transactions
-        let results = PendingTransaction {
+        let mut results = PendingTransaction {
             transaction_type: TransactionType::Multiplayer,
             ..Default::default()
         };
@@ -245,6 +245,18 @@ impl GridController {
                 };
 
                 self.client_apply_transaction(&mut transaction, t.sequence_num);
+                results.generate_thumbnail |= transaction.generate_thumbnail;
+                results.validations.extend(transaction.validations);
+                results.dirty_hashes.extend(transaction.dirty_hashes);
+                results.sheet_borders.extend(transaction.sheet_borders);
+                results.code_cells.extend(transaction.code_cells);
+                results.html_cells.extend(transaction.html_cells);
+                results.image_cells.extend(transaction.image_cells);
+                results.fill_cells.extend(transaction.fill_cells);
+                results.sheet_info.extend(transaction.sheet_info);
+                results
+                    .offsets_modified
+                    .extend(transaction.offsets_modified);
             } else {
                 dbgjs!(
                     "Unable to decompress and deserialize operations in received_transactions()"

From e1c03bdff47e198f3418549075ccdd5f2c869235 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 18 Nov 2024 13:51:14 -0700
Subject: [PATCH 31/62] remove unused code

---
 .../src/app/ui/hooks/useFileImport.tsx        |   4 -
 .../src/dashboard/atoms/newFileDialogAtom.ts  |  16 --
 .../dashboard/components/DashboardSidebar.tsx |   2 +-
 .../src/dashboard/components/FileDragDrop.tsx |   7 +-
 .../src/dashboard/components/FilesList.tsx    |   8 +-
 .../dashboard/components/NewFileDialog.tsx    | 247 ------------------
 ...onnectionSchemaBrowserTableQueryAction.tsx |   4 +-
 quadratic-client/src/routes/_dashboard.tsx    |  26 +-
 8 files changed, 8 insertions(+), 306 deletions(-)
 delete mode 100644 quadratic-client/src/dashboard/atoms/newFileDialogAtom.ts
 delete mode 100644 quadratic-client/src/dashboard/components/NewFileDialog.tsx

diff --git a/quadratic-client/src/app/ui/hooks/useFileImport.tsx b/quadratic-client/src/app/ui/hooks/useFileImport.tsx
index 05f44fd727..b78535312d 100644
--- a/quadratic-client/src/app/ui/hooks/useFileImport.tsx
+++ b/quadratic-client/src/app/ui/hooks/useFileImport.tsx
@@ -3,7 +3,6 @@ import { getFileType, stripExtension, supportedFileTypes, uploadFile } from '@/a
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { FileImportProgress, filesImportProgressAtom } from '@/dashboard/atoms/filesImportProgressAtom';
 import { filesImportProgressListAtom } from '@/dashboard/atoms/filesImportProgressListAtom';
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { apiClient } from '@/shared/api/apiClient';
 import { ApiError } from '@/shared/api/fetchFromApi';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
@@ -15,7 +14,6 @@ import { useSetRecoilState } from 'recoil';
 export function useFileImport() {
   const setFilesImportProgressState = useSetRecoilState(filesImportProgressAtom);
   const setFilesImportProgressListState = useSetRecoilState(filesImportProgressListAtom);
-  const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
 
   const { addGlobalSnackbar } = useGlobalSnackbar();
 
@@ -192,7 +190,6 @@ export function useFileImport() {
               updateCurrentFileState({ step: 'done', progress: 100, uuid, abortController: undefined });
               if (openImportedFile) {
                 setFilesImportProgressListState({ show: false });
-                setNewFileDialogState((prev) => ({ ...prev, show: false }));
                 window.location.href = ROUTES.FILE(uuid);
               }
             })
@@ -235,7 +232,6 @@ export function useFileImport() {
     }
 
     setFilesImportProgressState((prev) => ({ ...prev, importing: false }));
-    setNewFileDialogState((prev) => ({ ...prev, show: false }));
   };
 
   return handleImport;
diff --git a/quadratic-client/src/dashboard/atoms/newFileDialogAtom.ts b/quadratic-client/src/dashboard/atoms/newFileDialogAtom.ts
deleted file mode 100644
index 94df76eaf4..0000000000
--- a/quadratic-client/src/dashboard/atoms/newFileDialogAtom.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { atom } from 'recoil';
-
-interface NewFileDialogState {
-  show: boolean;
-  isPrivate: boolean;
-}
-
-const defaultNewFileDialogState: NewFileDialogState = {
-  show: false,
-  isPrivate: true,
-};
-
-export const newFileDialogAtom = atom({
-  key: 'newFileDialog',
-  default: defaultNewFileDialogState,
-});
diff --git a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
index ef77a3e653..a99f849d79 100644
--- a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
+++ b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
@@ -191,7 +191,7 @@ function SidebarNavLinkCreateButton({
           asChild
           variant="ghost"
           size="icon-sm"
-          className="absolute right-2 top-1 ml-auto opacity-30 hover:opacity-100"
+          className="absolute right-2 top-1 ml-auto !bg-transparent opacity-30 hover:opacity-100"
         >
           <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}>
             <AddIcon />
diff --git a/quadratic-client/src/dashboard/components/FileDragDrop.tsx b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
index a8f61c1281..2b9bab4818 100644
--- a/quadratic-client/src/dashboard/components/FileDragDrop.tsx
+++ b/quadratic-client/src/dashboard/components/FileDragDrop.tsx
@@ -1,8 +1,7 @@
 import { useFileImport } from '@/app/ui/hooks/useFileImport';
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { cn } from '@/shared/shadcn/utils';
 import { DragEvent, useCallback } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { fileDragDropModalAtom } from '../atoms/fileDragDropModalAtom';
 
 interface FileDragDropProps {
@@ -11,7 +10,6 @@ interface FileDragDropProps {
 
 export function FileDragDrop({ className }: FileDragDropProps) {
   const [fileDragDropModal, setFileDragDropModal] = useRecoilState(fileDragDropModalAtom);
-  const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
   const handleFileImport = useFileImport();
 
   const handleDrag = useCallback(
@@ -32,13 +30,12 @@ export function FileDragDrop({ className }: FileDragDropProps) {
       e.stopPropagation();
 
       setFileDragDropModal({ show: false, teamUuid: undefined, isPrivate: undefined });
-      setNewFileDialogState((prev) => ({ ...prev, show: false }));
 
       const files = e.dataTransfer.files;
       const { isPrivate, teamUuid } = fileDragDropModal;
       handleFileImport({ files, isPrivate, teamUuid });
     },
-    [fileDragDropModal, handleFileImport, setFileDragDropModal, setNewFileDialogState]
+    [fileDragDropModal, handleFileImport, setFileDragDropModal]
   );
 
   if (!fileDragDropModal.show) return null;
diff --git a/quadratic-client/src/dashboard/components/FilesList.tsx b/quadratic-client/src/dashboard/components/FilesList.tsx
index a0a5b885cf..29af05797e 100644
--- a/quadratic-client/src/dashboard/components/FilesList.tsx
+++ b/quadratic-client/src/dashboard/components/FilesList.tsx
@@ -1,5 +1,4 @@
 import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { FileDragDrop } from '@/dashboard/components/FileDragDrop';
 import { DRAWER_WIDTH } from '@/routes/_dashboard';
 import { Action as FilesAction } from '@/routes/api.files.$uuid';
@@ -10,7 +9,7 @@ import { FilePermission, PublicLinkAccess } from 'quadratic-shared/typesAndSchem
 import { ReactNode, useCallback, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useFetchers, useLocation } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { Empty } from './Empty';
 import { FilesListItemExampleFile, FilesListItemUserFile, FilesListItems } from './FilesListItem';
 import { FilesListViewControls } from './FilesListViewControls';
@@ -129,7 +128,6 @@ export function FilesList({
   const filesBeingDeleted = fetchers.filter((fetcher) => (fetcher.json as FilesAction['request'])?.action === 'delete');
   const activeShareMenuFileName = files.find((file) => file.uuid === activeShareMenuFileId)?.name || '';
 
-  const { show: newFileDialogShow } = useRecoilValue(newFileDialogAtom);
   const setFileDragDropState = useSetRecoilState(fileDragDropModalAtom);
   const handleDragEnter = useCallback(
     (e: React.DragEvent<HTMLDivElement>) => {
@@ -177,9 +175,7 @@ export function FilesList({
         />
       )}
 
-      {!newFileDialogShow && (
-        <FileDragDrop className={`lg:left-[${DRAWER_WIDTH}px] lg:w-[calc(100%-${DRAWER_WIDTH}px)]`} />
-      )}
+      <FileDragDrop className={`lg:left-[${DRAWER_WIDTH}px] lg:w-[calc(100%-${DRAWER_WIDTH}px)]`} />
     </div>
   );
 }
diff --git a/quadratic-client/src/dashboard/components/NewFileDialog.tsx b/quadratic-client/src/dashboard/components/NewFileDialog.tsx
deleted file mode 100644
index d561cc6034..0000000000
--- a/quadratic-client/src/dashboard/components/NewFileDialog.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
-import { useFileImport } from '@/app/ui/hooks/useFileImport';
-import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
-import { FileDragDrop } from '@/dashboard/components/FileDragDrop';
-import { useConnectionSchemaBrowserTableQueryActionNewFile } from '@/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction';
-import { ConnectionSchemaBrowser } from '@/shared/components/connections/ConnectionSchemaBrowser';
-import { PrivateFileToggle } from '@/shared/components/connections/PrivateFileToggle';
-import { AddIcon, ApiIcon, DatabaseIcon, ExamplesIcon, FilePrivateIcon, ImportIcon } from '@/shared/components/Icons';
-import { ROUTES } from '@/shared/constants/routes';
-import { useNewFileFromStatePythonApi } from '@/shared/hooks/useNewFileFromState';
-import { Button } from '@/shared/shadcn/ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/shadcn/ui/dialog';
-import { cn } from '@/shared/shadcn/utils';
-import { ArrowLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
-import { ConnectionList, ConnectionType } from 'quadratic-shared/typesAndSchemasConnections';
-import { useCallback, useMemo, useState } from 'react';
-import { Link, useLocation, useNavigation } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
-
-const SHOW_EXAMPLES = import.meta.env.VITE_STORAGE_TYPE !== 'file-system';
-
-type Props = {
-  connections: ConnectionList;
-  onClose: () => void;
-  teamUuid: string;
-  isPrivate: boolean;
-};
-
-export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initialIsPrivate }: Props) {
-  const location = useLocation();
-  const navigation = useNavigation();
-  const [isPrivate, setIsPrivate] = useState<boolean>(!!initialIsPrivate);
-  const [activeConnectionUuid, setActiveConnectionUuid] = useState<string>('');
-  const handleFileImport = useFileImport();
-  const newFileApiHref = useNewFileFromStatePythonApi({ isPrivate, teamUuid });
-
-  const gridItemClassName =
-    'flex flex-col items-center justify-center gap-1 rounded-lg border border-border p-4 pt-5 w-full group';
-  const gridItemInteractiveClassName = 'hover:bg-accent hover:text-foreground cursor-pointer';
-
-  const activeConnection = useMemo(
-    () => connections.find((connection) => connection.uuid === activeConnectionUuid),
-    [activeConnectionUuid, connections]
-  );
-
-  // Do an in-memory navigation if we're not in the app
-  const reloadDocument = useMemo(() => location.pathname.startsWith('/file/'), [location.pathname]);
-
-  const setFileDragDropState = useSetRecoilState(fileDragDropModalAtom);
-  const handleDragEnter = useCallback(
-    (e: React.DragEvent<HTMLDivElement>) => {
-      if (!e.dataTransfer.types.includes('Files')) return;
-      setFileDragDropState({ show: true, teamUuid, isPrivate });
-    },
-    [isPrivate, setFileDragDropState, teamUuid]
-  );
-
-  return (
-    <Dialog open={true} onOpenChange={onClose}>
-      {/* overflow: visible here fixes a bug with the tooltip being cut off */}
-      <DialogContent className="relative max-w-xl overflow-visible" onDragEnter={handleDragEnter}>
-        {navigation.state !== 'idle' && (
-          <div className="absolute left-0 right-0 top-0 h-full w-full bg-background/60" />
-        )}
-        <DialogHeader className="space-y-0">
-          <DialogTitle className="flex h-7 items-center gap-1">
-            {activeConnection ? (
-              <>
-                <Button
-                  onClick={() => setActiveConnectionUuid('')}
-                  variant="ghost"
-                  size="icon-sm"
-                  disabled={!activeConnection}
-                >
-                  <ArrowLeftIcon />
-                </Button>
-                New file from connection
-              </>
-            ) : (
-              'New file'
-            )}
-            {isPrivate && <FilePrivateIcon />}
-          </DialogTitle>
-          <DialogDescription asChild>
-            <PrivateFileToggle
-              className="text-muted-foreground"
-              isPrivate={isPrivate}
-              onToggle={() => setIsPrivate((prev) => !prev)}
-            >
-              Create in:{' '}
-            </PrivateFileToggle>
-          </DialogDescription>
-        </DialogHeader>
-        {activeConnection ? (
-          <SchemaBrowser
-            connectionUuid={activeConnection.uuid}
-            connectionType={activeConnection.type}
-            isPrivate={isPrivate}
-            teamUuid={teamUuid}
-          />
-        ) : (
-          <ul className="grid grid-cols-4 grid-rows-[1f_1fr_auto] gap-2 text-sm">
-            <li className={`col-span-1`}>
-              <Link
-                to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}
-                reloadDocument
-                className={cn(gridItemClassName, gridItemInteractiveClassName, 'border-primary text-muted-foreground')}
-                onClick={onClose}
-              >
-                <ItemIcon>
-                  <AddIcon />
-                </ItemIcon>
-                Blank
-              </Link>
-            </li>
-            <li className={`col-span-3`}>
-              <button
-                className={cn(
-                  `border-dashed text-center text-muted-foreground`,
-                  gridItemClassName,
-                  gridItemInteractiveClassName
-                )}
-                onClick={() => {
-                  onClose();
-                  handleFileImport({ isPrivate, teamUuid });
-                }}
-              >
-                <ItemIcon>
-                  <ImportIcon />
-                </ItemIcon>
-                Import data from a file (.csv, .pqt, .xlsx, .grid)
-              </button>
-            </li>
-            <li className={`col-span-2`}>
-              <Link
-                to={newFileApiHref}
-                className={cn('text-muted-foreground', gridItemClassName, gridItemInteractiveClassName)}
-                onClick={onClose}
-              >
-                <ItemIcon>
-                  <ApiIcon />
-                </ItemIcon>
-                Fetch data from an API
-              </Link>
-            </li>
-            {SHOW_EXAMPLES && (
-              <li className={`col-span-2`}>
-                <Link
-                  to={ROUTES.EXAMPLES}
-                  className={cn(`text-muted-foreground`, gridItemClassName, gridItemInteractiveClassName)}
-                  reloadDocument={reloadDocument}
-                  onClick={onClose}
-                >
-                  <ItemIcon>
-                    <ExamplesIcon />
-                  </ItemIcon>
-                  Learn from an example file
-                </Link>
-              </li>
-            )}
-            <li className={`col-span-4 rounded border border-border`}>
-              <div className={`text-muted-foreground ${gridItemClassName} border-none`}>
-                <ItemIcon disabled>
-                  <DatabaseIcon className="text-muted-foreground" />
-                </ItemIcon>
-                Query data from a connection
-              </div>
-              {connections.length > 0 ? (
-                <ul className="w-full border-border">
-                  {connections.slice(0, 5).map((connection) => (
-                    <li key={connection.uuid}>
-                      <button
-                        className="flex w-full cursor-pointer items-center gap-4 border-t border-border px-4 py-2 hover:bg-accent"
-                        onClick={() => setActiveConnectionUuid(connection.uuid)}
-                      >
-                        <LanguageIcon language={connection.type} sx={{ width: 18, height: 18 }} />
-                        {connection.name}
-                        <ChevronRightIcon className="ml-auto text-muted-foreground opacity-50" />
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <div className="border-t border-border p-2 text-center text-sm text-muted-foreground">
-                  No connections,{' '}
-                  <Link
-                    to={ROUTES.TEAM_CONNECTIONS(teamUuid)}
-                    className="underline hover:text-primary"
-                    reloadDocument={reloadDocument}
-                    onClick={onClose}
-                  >
-                    create one
-                  </Link>
-                  .
-                </div>
-              )}
-            </li>
-          </ul>
-        )}
-
-        <FileDragDrop />
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function ItemIcon({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
-  return (
-    <div
-      className={cn(
-        `flex h-8 w-8 items-center justify-center rounded bg-accent text-primary`,
-        disabled ? '' : `group-hover:bg-primary group-hover:text-background`
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-function SchemaBrowser({
-  connectionType,
-  connectionUuid,
-  isPrivate,
-  teamUuid,
-}: {
-  connectionType: ConnectionType;
-  connectionUuid: string;
-  isPrivate: boolean;
-  teamUuid: string;
-}) {
-  const { TableQueryAction } = useConnectionSchemaBrowserTableQueryActionNewFile({
-    connectionType,
-    connectionUuid,
-    isPrivate,
-    teamUuid,
-  });
-
-  return (
-    <ConnectionSchemaBrowser
-      selfContained={true}
-      type={connectionType}
-      uuid={connectionUuid}
-      TableQueryAction={TableQueryAction}
-      teamUuid={teamUuid}
-    />
-  );
-}
diff --git a/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx b/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
index b44f8093b7..28736c4f28 100644
--- a/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
+++ b/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
@@ -31,8 +31,8 @@ export const useConnectionSchemaBrowserTableQueryActionNewFile = ({
             mixpanel.track('[Connections].schemaViewer.newFileFromTable');
           }}
         >
-          <Button size="sm" variant="secondary" disabled={to.length === 0}>
-            New file querying selected table
+          <Button size="sm" disabled={to.length === 0}>
+            New file with selected table
           </Button>
         </Link>
       );
diff --git a/quadratic-client/src/routes/_dashboard.tsx b/quadratic-client/src/routes/_dashboard.tsx
index e139089340..4cb51edd63 100644
--- a/quadratic-client/src/routes/_dashboard.tsx
+++ b/quadratic-client/src/routes/_dashboard.tsx
@@ -1,10 +1,8 @@
 import { useCheckForAuthorizationTokenOnWindowFocus } from '@/auth/auth';
-import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
 import { DashboardSidebar } from '@/dashboard/components/DashboardSidebar';
 import { EducationDialog } from '@/dashboard/components/EducationDialog';
 import { Empty } from '@/dashboard/components/Empty';
 import { ImportProgressList } from '@/dashboard/components/ImportProgressList';
-import { NewFileDialog } from '@/dashboard/components/NewFileDialog';
 import { apiClient } from '@/shared/api/apiClient';
 import { MenuIcon } from '@/shared/components/Icons';
 import { ROUTES, ROUTE_LOADER_IDS, SEARCH_PARAMS } from '@/shared/constants/routes';
@@ -31,7 +29,7 @@ import {
   useRouteLoaderData,
   useSearchParams,
 } from 'react-router-dom';
-import { RecoilRoot, useRecoilState } from 'recoil';
+import { RecoilRoot } from 'recoil';
 
 export const DRAWER_WIDTH = 264;
 export const ACTIVE_TEAM_UUID_KEY = 'activeTeamUuid';
@@ -225,34 +223,12 @@ export const Component = () => {
           </div>
           {searchParams.get(SEARCH_PARAMS.DIALOG.KEY) === SEARCH_PARAMS.DIALOG.VALUES.EDUCATION && <EducationDialog />}
         </div>
-        <NewFileDialogWrapper />
         <ImportProgressList />
       </TooltipProvider>
     </RecoilRoot>
   );
 };
 
-function NewFileDialogWrapper() {
-  const [newFileDialogState, setNewFileDialogState] = useRecoilState(newFileDialogAtom);
-  const {
-    activeTeam: {
-      connections,
-      team: { uuid: teamUuid },
-    },
-  } = useDashboardRouteLoaderData();
-
-  if (!newFileDialogState.show) return null;
-
-  return (
-    <NewFileDialog
-      connections={connections}
-      teamUuid={teamUuid}
-      onClose={() => setNewFileDialogState((prev) => ({ ...prev, show: false }))}
-      isPrivate={newFileDialogState.isPrivate}
-    />
-  );
-}
-
 export const ErrorBoundary = () => {
   const error = useRouteError();
 

From b2a13b45dd00f56255510f694dff3d729bc0bc0c Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Tue, 19 Nov 2024 03:50:47 +0530
Subject: [PATCH 32/62] feat: request proxying for JS & fix auth header
 override for both JS and Python requests

---
 .../javascriptClientMessages.ts               | 26 ++++++++--
 .../javascriptWebWorker.ts                    | 13 ++++-
 .../javascript/getJavascriptFetchOverride.ts  | 29 +++++++++++
 .../javascript/getJavascriptXHROverride.ts    | 50 +++++++++++++++++++
 .../worker/javascript/javascript.ts           |  6 ++-
 .../worker/javascript/javascriptCompile.ts    | 11 +++-
 .../worker/javascriptClient.ts                | 30 ++++++++++-
 .../pythonWebWorker/worker/python.ts          | 27 ++++++++--
 .../pythonWebWorker/worker/pythonClient.ts    |  2 +-
 quadratic-connection/src/proxy.rs             | 24 ++++++---
 10 files changed, 194 insertions(+), 24 deletions(-)
 create mode 100644 quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts
 create mode 100644 quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptXHROverride.ts

diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptClientMessages.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptClientMessages.ts
index ab4aa0a248..691b214bca 100644
--- a/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptClientMessages.ts
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptClientMessages.ts
@@ -22,15 +22,31 @@ export interface JavascriptClientState {
   version?: string;
 }
 
+export interface JavascriptClientInit {
+  type: 'javascriptClientInit';
+  version: string;
+}
+
 export interface ClientJavascriptCoreChannel {
   type: 'clientJavascriptCoreChannel';
+  env: ImportMetaEnv;
 }
 
-export interface JavascriptClientInit {
-  type: 'javascriptClientInit';
-  version: string;
+export interface ClientJavascriptGetJwt {
+  type: 'clientJavascriptGetJwt';
+  id: number;
+  jwt: string;
+}
+
+export interface JavascriptClientGetJwt {
+  type: 'javascriptClientGetJwt';
+  id: number;
 }
 
-export type JavascriptClientMessage = JavascriptClientLoadError | JavascriptClientState | JavascriptClientInit;
+export type JavascriptClientMessage =
+  | JavascriptClientLoadError
+  | JavascriptClientState
+  | JavascriptClientInit
+  | JavascriptClientGetJwt;
 
-export type ClientJavascriptMessage = ClientJavascriptCoreChannel;
+export type ClientJavascriptMessage = ClientJavascriptCoreChannel | ClientJavascriptGetJwt;
diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptWebWorker.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptWebWorker.ts
index be63341a90..d2072110c6 100644
--- a/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptWebWorker.ts
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/javascriptWebWorker.ts
@@ -1,8 +1,9 @@
 import { events } from '@/app/events/events';
+import { authClient } from '@/auth/auth';
 import mixpanel from 'mixpanel-browser';
 import { LanguageState } from '../languageTypes';
 import { quadraticCore } from '../quadraticCore/quadraticCore';
-import { ClientJavascriptMessage, JavascriptClientMessage } from './javascriptClientMessages';
+import { ClientJavascriptMessage, JavascriptClientGetJwt, JavascriptClientMessage } from './javascriptClientMessages';
 
 class JavascriptWebWorker {
   state: LanguageState = 'loading';
@@ -30,6 +31,14 @@ class JavascriptWebWorker {
         events.emit('javascriptState', message.data.state, message.data.current, message.data.awaitingExecution);
         break;
 
+      case 'javascriptClientGetJwt':
+        authClient.getTokenOrRedirect().then((jwt) => {
+          const data = message.data as JavascriptClientGetJwt;
+          this.send({ type: 'clientJavascriptGetJwt', id: data.id, jwt });
+        });
+
+        break;
+
       default:
         throw new Error(`Unhandled message type ${message.type}`);
     }
@@ -40,7 +49,7 @@ class JavascriptWebWorker {
     this.worker.onmessage = this.handleMessage;
 
     const JavascriptCoreChannel = new MessageChannel();
-    this.send({ type: 'clientJavascriptCoreChannel' }, JavascriptCoreChannel.port1);
+    this.send({ type: 'clientJavascriptCoreChannel', env: import.meta.env }, JavascriptCoreChannel.port1);
     quadraticCore.sendJavascriptInit(JavascriptCoreChannel.port2);
   }
 
diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts
new file mode 100644
index 0000000000..5d061aa1c8
--- /dev/null
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts
@@ -0,0 +1,29 @@
+export function getJavascriptFetchOverride(proxyUrl: string, jwt: string) {
+  return `
+self['fetch'] = new Proxy(fetch, {
+  apply: function (target, thisArg, args) {
+    const [resource, config] = args;
+
+    const newConfig = config || {};
+    const headers = newConfig.headers || {};
+    const newHeaders = {};
+
+    // Prefix all original request headers with X-Proxy-
+    for (const key in headers) {
+      newHeaders[\`X-Proxy-\${key}\`] = headers[key];
+    }
+
+    // Set the original request URL on X-Proxy-Url header
+    const url = new URL(resource, location.origin);
+    newHeaders['X-Proxy-Url'] = url.toString();
+
+    // Set the authorization header for the proxy server
+    newHeaders['Authorization'] = 'Bearer ${jwt}';
+
+    newConfig.headers = newHeaders;
+
+    return target.call(thisArg, '${proxyUrl}', newConfig);
+  },
+});\n
+`;
+}
diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptXHROverride.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptXHROverride.ts
new file mode 100644
index 0000000000..65fc7f0c68
--- /dev/null
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptXHROverride.ts
@@ -0,0 +1,50 @@
+export function getJavascriptXHROverride(proxyUrl: string, jwt: string) {
+  return `
+self['XMLHttpRequest'] = new Proxy(XMLHttpRequest, {
+  construct: function (target, args) {
+    const xhr = new target();
+
+    xhr.open = new Proxy(xhr.open, {
+      apply: function (target, thisArg, args) {
+        Object.defineProperty(xhr, '__url', { value: args[1].toString(), writable: true });
+        args[1] = '${proxyUrl}';
+        return target.apply(thisArg, args);
+      },
+    });
+
+    xhr.setRequestHeader = new Proxy(xhr.setRequestHeader, {
+      apply: function (target, thisArg, args) {
+        // apply quadratic-authorization header as the only authorization header
+        // this is required for authentication with the proxy server
+        if (args[0] === 'Quadratic-Authorization') {
+          args[0] = 'Authorization';
+        } else {
+          // apply all headers on the original request prefixed with X-Proxy-
+          args[0] = \`X-Proxy-\${args[0]}\`;
+        }
+        return target.apply(thisArg, args);
+      },
+    });
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === XMLHttpRequest.OPENED) {
+        // this applies the quadratic-authorization header as the only authorization header
+        // this is required for authentication with the proxy server
+        xhr.setRequestHeader('Quadratic-Authorization', 'Bearer ${jwt}');
+
+        // this applies the original request URL as the x-proxy-url header
+        // this will get prefixed with X-Proxy due to above setRequestHeader override
+        xhr.setRequestHeader('Url', xhr.__url);
+      }
+      // After completion of XHR request
+      if (xhr.readyState === 4) {
+        if (xhr.status === 401) {
+        }
+      }
+    };
+
+    return xhr;
+  },
+});\n
+`;
+}
diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascript.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascript.ts
index 92df152202..fc5262bd35 100644
--- a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascript.ts
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascript.ts
@@ -34,7 +34,7 @@ export class Javascript {
     this.api = new JavascriptAPI(this);
   }
 
-  init = async () => {
+  private init = async () => {
     await esbuild.initialize({
       wasmURL: '/esbuild.wasm',
       // this would create another worker to run the actual code. I don't
@@ -97,7 +97,9 @@ export class Javascript {
     this.row = message.y;
 
     try {
-      const code = prepareJavascriptCode(transformedCode, message.x, message.y, this.withLineNumbers);
+      const proxyUrl = `${javascriptClient.env.VITE_QUADRATIC_CONNECTION_URL}/proxy`;
+      const jwt = await javascriptClient.getJwt();
+      const code = prepareJavascriptCode(transformedCode, message.x, message.y, this.withLineNumbers, proxyUrl, jwt);
       const runner = new Worker(URL.createObjectURL(new Blob([code], { type: 'application/javascript' })), {
         type: 'module',
         name: 'javascriptWorker',
diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts
index 2593ab988b..71efe50ea6 100644
--- a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts
@@ -5,10 +5,11 @@
 //! numbers to all return statements via a caught thrown error (the only way to
 //! get line numbers in JS).
 
+import { getJavascriptFetchOverride } from '@/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride';
+import { getJavascriptXHROverride } from '@/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptXHROverride';
 import * as esbuild from 'esbuild-wasm';
 import { LINE_NUMBER_VAR } from './javascript';
 import { javascriptLibrary } from './runner/generateJavascriptForRunner';
-
 export interface JavascriptTransformedCode {
   imports: string;
   code: string;
@@ -66,10 +67,16 @@ export function prepareJavascriptCode(
   transform: JavascriptTransformedCode,
   x: number,
   y: number,
-  withLineNumbers: boolean
+  withLineNumbers: boolean,
+  proxyUrl: string,
+  jwt: string
 ): string {
   const code = withLineNumbers ? javascriptAddLineNumberVars(transform) : transform.code;
+  const javascriptXHROverride = getJavascriptXHROverride(proxyUrl, jwt);
+  const javascriptFetchOverride = getJavascriptFetchOverride(proxyUrl, jwt);
   const compiledCode =
+    javascriptXHROverride +
+    javascriptFetchOverride +
     transform.imports +
     (withLineNumbers ? `let ${LINE_NUMBER_VAR} = 0;` : '') +
     javascriptLibrary.replace('{x:0,y:0}', `{x:${x},y:${y}}`) + // replace the pos() with the correct x,y coordinates
diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascriptClient.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascriptClient.ts
index 1aeeee398a..0819f640a8 100644
--- a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascriptClient.ts
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascriptClient.ts
@@ -1,12 +1,20 @@
 import { debugWebWorkers, debugWebWorkersMessages } from '@/app/debugFlags';
 import { LanguageState } from '@/app/web-workers/languageTypes';
 import { CodeRun } from '../../CodeRun';
-import type { ClientJavascriptMessage, JavascriptClientMessage } from '../javascriptClientMessages';
+import type {
+  ClientJavascriptGetJwt,
+  ClientJavascriptMessage,
+  JavascriptClientMessage,
+} from '../javascriptClientMessages';
 import { javascriptCore } from './javascriptCore';
 
 declare var self: WorkerGlobalScope & typeof globalThis;
 
 class JavascriptClient {
+  private id = 0;
+  private waitingForResponse: Record<number, Function> = {};
+  env: Record<string, string> = {};
+
   start() {
     self.onmessage = this.handleMessage;
     if (debugWebWorkers) console.log('[javascriptClient] initialized.');
@@ -25,11 +33,21 @@ class JavascriptClient {
 
     switch (e.data.type) {
       case 'clientJavascriptCoreChannel':
+        this.env = e.data.env;
         javascriptCore.init(e.ports[0]);
         break;
 
       default:
-        console.warn('[coreClient] Unhandled message type', e.data);
+        if (e.data.id !== undefined) {
+          if (this.waitingForResponse[e.data.id]) {
+            this.waitingForResponse[e.data.id](e.data);
+            delete this.waitingForResponse[e.data.id];
+          } else {
+            console.warn('No resolve for message in javascriptClient', e.data.type);
+          }
+        } else {
+          console.warn('[javascriptClient] Unhandled message type', e.data);
+        }
     }
   };
 
@@ -50,6 +68,14 @@ class JavascriptClient {
   sendInit(version: string) {
     this.send({ type: 'javascriptClientInit', version });
   }
+
+  getJwt(): Promise<string> {
+    return new Promise((resolve) => {
+      const id = this.id++;
+      this.waitingForResponse[id] = (message: ClientJavascriptGetJwt) => resolve(message.jwt);
+      this.send({ type: 'javascriptClientGetJwt', id });
+    });
+  }
 }
 
 export const javascriptClient = new JavascriptClient();
diff --git a/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts b/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts
index 9a555e0071..e2a0edfe43 100644
--- a/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts
+++ b/quadratic-client/src/app/web-workers/pythonWebWorker/worker/python.ts
@@ -51,7 +51,7 @@ class Python {
     }
   };
 
-  init = async () => {
+  private init = async () => {
     const jwt = await pythonClient.getJwt();
 
     // patch XMLHttpRequest to send requests to the proxy
@@ -77,12 +77,31 @@ class Python {
           },
         });
 
+        xhr.setRequestHeader = new Proxy(xhr.setRequestHeader, {
+          apply: function (target, thisArg, args: [string, string]) {
+            // apply quadratic-authorization header as the only authorization header
+            // this is required for authentication with the proxy server
+            if (args[0] === 'Quadratic-Authorization') {
+              args[0] = 'Authorization';
+            } else {
+              // apply all headers on the original request prefixed with X-Proxy
+              args[0] = `X-Proxy-${args[0]}`;
+            }
+            return target.apply(thisArg, args);
+          },
+        });
+
         xhr.onreadystatechange = function () {
           if (xhr.readyState === XMLHttpRequest.OPENED) {
-            xhr.setRequestHeader('Proxy', (xhr as any).__url);
-            xhr.setRequestHeader('Authorization', `Bearer ${jwt}`);
+            // this applies the quadratic-authorization header as the only authorization header
+            // this is required for authentication with the proxy server
+            xhr.setRequestHeader('Quadratic-Authorization', `Bearer ${jwt}`);
+
+            // this applies the original request URL as the x-proxy-url header
+            // this will get prefixed with X-Proxy due to above setRequestHeader override
+            xhr.setRequestHeader('Url', (xhr as any).__url);
           }
-          // After complition of XHR request
+          // After completion of XHR request
           if (xhr.readyState === 4) {
             if (xhr.status === 401) {
             }
diff --git a/quadratic-client/src/app/web-workers/pythonWebWorker/worker/pythonClient.ts b/quadratic-client/src/app/web-workers/pythonWebWorker/worker/pythonClient.ts
index 1ccaac0704..f57a3b2083 100644
--- a/quadratic-client/src/app/web-workers/pythonWebWorker/worker/pythonClient.ts
+++ b/quadratic-client/src/app/web-workers/pythonWebWorker/worker/pythonClient.ts
@@ -47,7 +47,7 @@ class PythonClient {
             this.waitingForResponse[e.data.id](e.data);
             delete this.waitingForResponse[e.data.id];
           } else {
-            console.warn('No resolve for message in pythonClient', e.data.id);
+            console.warn('No resolve for message in pythonClient', e.data.type);
           }
         } else {
           console.warn('[pythonClient] Unhandled message type', e.data);
diff --git a/quadratic-connection/src/proxy.rs b/quadratic-connection/src/proxy.rs
index 443f8e2665..2575dcaf77 100644
--- a/quadratic-connection/src/proxy.rs
+++ b/quadratic-connection/src/proxy.rs
@@ -13,7 +13,9 @@ use crate::error::{proxy_error, ConnectionError, Result};
 use crate::state::State;
 
 const REQUEST_TIMEOUT_SEC: u64 = 15;
-const PROXY_HEADER: &str = "proxy";
+const AUTHORIZATION_HEADER: &str = "authorization";
+const PROXY_URL_HEADER: &str = "x-proxy-url";
+const PROXY_HEADER_PREFIX: &str = "x-proxy-";
 
 pub(crate) async fn axum_to_reqwest(
     url: &str,
@@ -24,12 +26,22 @@ pub(crate) async fn axum_to_reqwest(
     let method = Method::from_bytes(method_bytes).map_err(proxy_error)?;
 
     let mut headers = reqwest::header::HeaderMap::with_capacity(req.headers().len());
-    let headers_to_ignore = ["host", PROXY_HEADER, "authorization"];
+    let headers_to_ignore = ["host", AUTHORIZATION_HEADER, PROXY_URL_HEADER];
 
     for (name, value) in req
         .headers()
         .into_iter()
         .filter(|(name, _)| !headers_to_ignore.contains(&name.as_str()))
+        .map(|(name, value)| {
+            if name.to_string().starts_with(PROXY_HEADER_PREFIX) {
+                (
+                    name.to_string().replace(PROXY_HEADER_PREFIX, ""),
+                    value.to_str().unwrap().to_string(),
+                )
+            } else {
+                (name.to_string(), value.to_str().unwrap().to_string())
+            }
+        })
     {
         let name = reqwest::header::HeaderName::from_bytes(name.as_ref()).map_err(proxy_error)?;
         let value =
@@ -74,7 +86,7 @@ pub(crate) async fn proxy(
 
     let headers = req.headers().clone();
     let url = headers
-        .get(PROXY_HEADER)
+        .get(PROXY_URL_HEADER)
         .ok_or_else(|| ConnectionError::Proxy("No proxy header found".to_string()))?
         .to_str()
         .map_err(proxy_error)?;
@@ -103,7 +115,7 @@ mod tests {
         let mut request = Request::new(Body::empty());
         request
             .headers_mut()
-            .insert(PROXY_HEADER, HeaderValue::from_static(URL));
+            .insert(PROXY_URL_HEADER, HeaderValue::from_static(URL));
         let data = proxy(state, request).await.unwrap();
         let response = data.into_response();
 
@@ -122,7 +134,7 @@ mod tests {
             .insert(ACCEPT, HeaderValue::from_static(accept));
         request
             .headers_mut()
-            .insert(PROXY_HEADER, HeaderValue::from_static(URL));
+            .insert(PROXY_URL_HEADER, HeaderValue::from_static(URL));
 
         let result = axum_to_reqwest(URL, request, state.client.clone())
             .await
@@ -133,7 +145,7 @@ mod tests {
         assert_eq!(result.method(), Method::POST);
         assert_eq!(result.url().to_string(), URL);
 
-        // PROXY_HEADER doesn't get copied over
+        // PROXY_URL_HEADER doesn't get copied over
         assert_eq!(result.headers().len(), 1);
         assert_eq!(
             result.headers().get(reqwest::header::ACCEPT).unwrap(),

From 1200b355ee82dd82d46255f1943a76f76753a50c Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Tue, 19 Nov 2024 04:01:30 +0530
Subject: [PATCH 33/62] avoid url object

---
 .../worker/javascript/getJavascriptFetchOverride.ts            | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts
index 5d061aa1c8..7d84d0d7e2 100644
--- a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts
+++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/getJavascriptFetchOverride.ts
@@ -2,7 +2,7 @@ export function getJavascriptFetchOverride(proxyUrl: string, jwt: string) {
   return `
 self['fetch'] = new Proxy(fetch, {
   apply: function (target, thisArg, args) {
-    const [resource, config] = args;
+    const [url, config] = args;
 
     const newConfig = config || {};
     const headers = newConfig.headers || {};
@@ -14,7 +14,6 @@ self['fetch'] = new Proxy(fetch, {
     }
 
     // Set the original request URL on X-Proxy-Url header
-    const url = new URL(resource, location.origin);
     newHeaders['X-Proxy-Url'] = url.toString();
 
     // Set the authorization header for the proxy server

From 95e9761f2358984e3bfc5b00edcbf1ab892ce517 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 18 Nov 2024 15:39:18 -0700
Subject: [PATCH 34/62] initial commit

---
 .../app/ui/menus/CodeEditor/CodeEditor.tsx    | 108 +++++++++---------
 .../ui/menus/CodeEditor/CodeEditorHeader.tsx  |  31 ++++-
 .../CodeEditor/panels/CodeEditorPanel.tsx     |  33 +-----
 .../src/shared/components/Icons.tsx           |   8 ++
 4 files changed, 92 insertions(+), 88 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
index 19459516d9..1305635cb8 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
@@ -35,72 +35,72 @@ export const CodeEditor = () => {
       <CodeEditorEscapeEffect editorInst={editorInst} />
 
       {showCodeEditor && (
-        <div
-          ref={codeEditorRef}
-          className={cn(
-            'relative flex h-full bg-background',
-            codeEditorPanelData.panelPosition === 'left' ? '' : 'flex-col'
-          )}
-          style={{
-            width: `${
-              codeEditorPanelData.editorWidth +
-              (codeEditorPanelData.panelPosition === 'left' ? codeEditorPanelData.panelWidth : 0)
-            }px`,
-            borderLeft: '1px solid black',
-          }}
-          onCopy={(e) => e.stopPropagation()}
-          onCut={(e) => e.stopPropagation()}
-          onPaste={(e) => e.stopPropagation()}
-        >
+        <div className="relative flex h-full flex-col">
+          <CodeEditorHeader editorInst={editorInst} />
           <div
-            id="QuadraticCodeEditorID"
+            ref={codeEditorRef}
             className={cn(
-              'flex min-h-0 shrink select-none flex-col',
-              codeEditorPanelData.panelPosition === 'left' ? 'order-2' : 'order-1'
+              'relative flex h-full flex-col border-t border-transparent bg-background',
+              codeEditorPanelData.panelPosition === 'left' ? 'flex-row border-t border-border' : 'flex-col'
             )}
             style={{
-              width: `${codeEditorPanelData.editorWidth}px`,
-              height:
-                codeEditorPanelData.panelPosition === 'left' || codeEditorPanelData.bottomHidden
-                  ? '100%'
-                  : `${codeEditorPanelData.editorHeightPercentage}%`,
-            }}
-            onKeyDownCapture={onKeyDownCodeEditor}
-            onPointerEnter={() => {
-              // todo: handle multiplayer code editor here
-              multiplayer.sendMouseMove();
+              width: `${
+                codeEditorPanelData.editorWidth +
+                (codeEditorPanelData.panelPosition === 'left' ? codeEditorPanelData.panelWidth : 0)
+              }px`,
             }}
+            onCopy={(e) => e.stopPropagation()}
+            onCut={(e) => e.stopPropagation()}
+            onPaste={(e) => e.stopPropagation()}
           >
-            <SaveChangesAlert editorInst={editorInst} />
+            <div
+              id="QuadraticCodeEditorID"
+              className={cn(
+                'flex min-h-0 shrink select-none flex-col',
+                codeEditorPanelData.panelPosition === 'left' ? 'order-2' : 'order-1'
+              )}
+              style={{
+                width: `${codeEditorPanelData.editorWidth}px`,
+                height:
+                  codeEditorPanelData.panelPosition === 'left' || codeEditorPanelData.bottomHidden
+                    ? '100%'
+                    : `${codeEditorPanelData.editorHeightPercentage}%`,
+              }}
+              onKeyDownCapture={onKeyDownCodeEditor}
+              onPointerEnter={() => {
+                // todo: handle multiplayer code editor here
+                multiplayer.sendMouseMove();
+              }}
+            >
+              <SaveChangesAlert editorInst={editorInst} />
 
-            <CodeEditorHeader editorInst={editorInst} />
+              <CodeEditorBody editorInst={editorInst} setEditorInst={setEditorInst} />
 
-            <CodeEditorBody editorInst={editorInst} setEditorInst={setEditorInst} />
+              <CodeEditorEmptyState editorInst={editorInst} />
 
-            <CodeEditorEmptyState editorInst={editorInst} />
+              <ReturnTypeInspector />
+            </div>
 
-            <ReturnTypeInspector />
-          </div>
+            <div
+              className={cn(
+                codeEditorPanelData.panelPosition === 'left' ? 'order-1' : 'order-2',
+                'relative flex flex-col bg-background'
+              )}
+              style={{
+                width: codeEditorPanelData.panelPosition === 'left' ? `${codeEditorPanelData.panelWidth}px` : '100%',
+                height:
+                  codeEditorPanelData.panelPosition === 'left'
+                    ? '100%'
+                    : codeEditorPanelData.bottomHidden
+                    ? 'auto'
+                    : 100 - codeEditorPanelData.editorHeightPercentage + '%',
+              }}
+            >
+              <CodeEditorPanel editorInst={editorInst} codeEditorRef={codeEditorRef} />
+            </div>
 
-          <div
-            className={cn(
-              codeEditorPanelData.panelPosition === 'left' ? 'order-1' : 'order-2',
-              'relative flex flex-col bg-background'
-            )}
-            style={{
-              width: codeEditorPanelData.panelPosition === 'left' ? `${codeEditorPanelData.panelWidth}px` : '100%',
-              height:
-                codeEditorPanelData.panelPosition === 'left'
-                  ? '100%'
-                  : codeEditorPanelData.bottomHidden
-                  ? 'auto'
-                  : 100 - codeEditorPanelData.editorHeightPercentage + '%',
-            }}
-          >
-            <CodeEditorPanel editorInst={editorInst} codeEditorRef={codeEditorRef} />
+            <CodeEditorPanels codeEditorRef={codeEditorRef} />
           </div>
-
-          <CodeEditorPanels codeEditorRef={codeEditorRef} />
         </div>
       )}
     </>
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
index a71433fc5c..5f266ff326 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
@@ -17,17 +17,24 @@ import { SnippetsPopover } from '@/app/ui/menus/CodeEditor/SnippetsPopover';
 import { useCancelRun } from '@/app/ui/menus/CodeEditor/hooks/useCancelRun';
 import { useCloseCodeEditor } from '@/app/ui/menus/CodeEditor/hooks/useCloseCodeEditor';
 import { useSaveAndRunCell } from '@/app/ui/menus/CodeEditor/hooks/useSaveAndRunCell';
+import { PanelPosition, useCodeEditorPanelData } from '@/app/ui/menus/CodeEditor/panels/useCodeEditorPanelData';
 import type { CodeRun } from '@/app/web-workers/CodeRun';
 import { LanguageState } from '@/app/web-workers/languageTypes';
 import { MultiplayerUser } from '@/app/web-workers/multiplayerWebWorker/multiplayerTypes';
-import { CloseIcon, SaveAndRunIcon, SaveAndRunStopIcon } from '@/shared/components/Icons';
+import {
+  CloseIcon,
+  DockToBottomIcon,
+  DockToRightIcon,
+  SaveAndRunIcon,
+  SaveAndRunStopIcon,
+} from '@/shared/components/Icons';
 import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { Button } from '@/shared/shadcn/ui/button';
 import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
 import { CircularProgress } from '@mui/material';
 import * as monaco from 'monaco-editor';
-import { useEffect, useMemo, useState } from 'react';
+import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 interface CodeEditorHeaderProps {
@@ -51,7 +58,7 @@ export const CodeEditorHeader = ({ editorInst }: CodeEditorHeaderProps) => {
     () => hasPermissionToEditFile(permissions) && (isConnection ? teamPermissions?.includes('TEAM_EDIT') : true),
     [permissions, teamPermissions, isConnection]
   );
-
+  const { panelPosition, setPanelPosition } = useCodeEditorPanelData();
   const connectionsFetcher = useConnectionsFetcher();
 
   // Get the connection name (it's possible the user won't have access to it
@@ -159,8 +166,16 @@ export const CodeEditorHeader = ({ editorInst }: CodeEditorHeaderProps) => {
     };
   }, [codeCellState.pos.x, codeCellState.pos.y, codeCellState.sheetId]);
 
+  const changePanelPosition = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      setPanelPosition((prev: PanelPosition) => (prev === 'left' ? 'bottom' : 'left'));
+      e.currentTarget.blur();
+    },
+    [setPanelPosition]
+  );
+
   return (
-    <div className="flex items-center py-1 pl-3 pr-2">
+    <div className="flex items-center border-l border-border py-1 pl-3 pr-2">
       <div
         className={cn(
           `relative`,
@@ -232,6 +247,14 @@ export const CodeEditorHeader = ({ editorInst }: CodeEditorHeaderProps) => {
           </>
         )}
 
+        <hr className="mx-2 h-4 border-l border-border" />
+
+        <TooltipPopover label={`Move panel ${panelPosition === 'left' ? 'to bottom' : 'to left'}`} side="bottom">
+          <Button onClick={changePanelPosition} size="icon-sm" variant="ghost" className="text-muted-foreground">
+            {panelPosition === 'left' ? <DockToBottomIcon /> : <DockToRightIcon />}
+          </Button>
+        </TooltipPopover>
+
         <TooltipPopover label={`Close`} shortcut={`Esc`} side="bottom">
           <Button
             variant="ghost"
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanel.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanel.tsx
index da2147c91e..7a4ecc29cd 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanel.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanel.tsx
@@ -1,18 +1,14 @@
 import { codeEditorCodeCellAtom } from '@/app/atoms/codeEditorAtom';
 import { getConnectionInfo } from '@/app/helpers/codeCellLanguage';
-import { PanelPositionBottomIcon, PanelPositionLeftIcon } from '@/app/ui/icons';
 import { CodeEditorPanelBottom } from '@/app/ui/menus/CodeEditor/panels/CodeEditorPanelBottom';
 import { CodeEditorPanelSide } from '@/app/ui/menus/CodeEditor/panels/CodeEditorPanelSide';
-import { PanelPosition, useCodeEditorPanelData } from '@/app/ui/menus/CodeEditor/panels/useCodeEditorPanelData';
+import { useCodeEditorPanelData } from '@/app/ui/menus/CodeEditor/panels/useCodeEditorPanelData';
 import { useConnectionSchemaBrowserTableQueryActionInsertQuery } from '@/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction';
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { ConnectionSchemaBrowser } from '@/shared/components/connections/ConnectionSchemaBrowser';
 import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
-import { Button } from '@/shared/shadcn/ui/button';
-import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
-import { cn } from '@/shared/shadcn/utils';
 import * as monaco from 'monaco-editor';
-import { MouseEvent, memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 type CodeEditorPanelProps = {
@@ -28,15 +24,7 @@ export const CodeEditorPanel = memo(({ editorInst, codeEditorRef }: CodeEditorPa
   } = useFileRouteLoaderData();
   const { language } = useRecoilValue(codeEditorCodeCellAtom);
   const connectionInfo = useMemo(() => getConnectionInfo(language), [language]);
-  const { panelPosition, setPanelPosition } = useCodeEditorPanelData();
-
-  const changePanelPosition = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      setPanelPosition((prev: PanelPosition) => (prev === 'left' ? 'bottom' : 'left'));
-      e.currentTarget.blur();
-    },
-    [setPanelPosition]
-  );
+  const { panelPosition } = useCodeEditorPanelData();
 
   const { TableQueryAction } = useConnectionSchemaBrowserTableQueryActionInsertQuery({ editorInst });
   const schemaBrowser =
@@ -53,21 +41,6 @@ export const CodeEditorPanel = memo(({ editorInst, codeEditorRef }: CodeEditorPa
 
   return (
     <>
-      {/* Panel position (left/bottom) control */}
-      <div
-        className={cn(
-          'absolute z-10',
-          panelPosition === 'bottom' ? 'right-1.5 top-1' : 'right-0.5 top-0.5',
-          'text-muted-foreground hover:text-foreground'
-        )}
-      >
-        <TooltipPopover label={panelPosition === 'bottom' ? 'Move panel left' : 'Move panel bottom'} side="bottom">
-          <Button onClick={changePanelPosition} size="icon-sm" variant="ghost">
-            {panelPosition === 'left' ? <PanelPositionBottomIcon /> : <PanelPositionLeftIcon />}
-          </Button>
-        </TooltipPopover>
-      </div>
-
       {panelPosition === 'left' && (
         <CodeEditorPanelSide
           codeEditorRef={codeEditorRef}
diff --git a/quadratic-client/src/shared/components/Icons.tsx b/quadratic-client/src/shared/components/Icons.tsx
index aae40f23a2..905cbad643 100644
--- a/quadratic-client/src/shared/components/Icons.tsx
+++ b/quadratic-client/src/shared/components/Icons.tsx
@@ -224,6 +224,14 @@ export const DiffIcon: IconComponent = (props) => {
   return <Icon {...props}>difference</Icon>;
 };
 
+export const DockToBottomIcon: IconComponent = (props) => {
+  return <Icon {...props}>dock_to_bottom</Icon>;
+};
+
+export const DockToRightIcon: IconComponent = (props) => {
+  return <Icon {...props}>dock_to_right</Icon>;
+};
+
 export const DownloadIcon: IconComponent = (props) => {
   return <Icon {...props}>download</Icon>;
 };

From 40c19dcc384e641cd36c1af2e8f1028e5cea2736 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 18 Nov 2024 16:08:16 -0700
Subject: [PATCH 35/62] initial commit

---
 .../CodeEditor/AIAssistant/CodeSnippet.tsx    | 41 +++++++++----
 .../app/ui/menus/CodeEditor/CodeEditor.tsx    |  3 +-
 .../CodeEditor/CodeEditorDiffButtons.tsx      | 26 ++++-----
 .../ui/menus/CodeEditor/CodeEditorHeader.tsx  | 57 ++++++++-----------
 4 files changed, 71 insertions(+), 56 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
index 32ece97a43..a36ab88d22 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
@@ -16,7 +16,7 @@ import mixpanel from 'mixpanel-browser';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 
-const MAX_LINES = 8;
+const MAX_LINES = 6;
 
 interface CodeSnippetProps {
   code: string;
@@ -69,12 +69,10 @@ export function CodeSnippet({ code, language = 'plaintext' }: CodeSnippetProps)
             </span>
           </Button>
 
-          {!isLoading && (
-            <div className="absolute right-1.5 top-1.5 flex items-center">
-              <CodeSnippetCopyButton text={code} language={language} />
-              <CodeSnippetRunButton text={code} language={language} />
-            </div>
-          )}
+          <div className="absolute right-1.5 top-1.5 flex items-center">
+            <CodeSnippetCopyButton text={code} language={language} isLoading={isLoading} />
+            <CodeSnippetRunButton text={code} language={language} isLoading={isLoading} />
+          </div>
         </div>
 
         <div
@@ -131,7 +129,15 @@ export function CodeSnippet({ code, language = 'plaintext' }: CodeSnippetProps)
   );
 }
 
-function CodeSnippetRunButton({ language, text }: { language: CodeSnippetProps['language']; text: string }) {
+function CodeSnippetRunButton({
+  language,
+  text,
+  isLoading,
+}: {
+  language: CodeSnippetProps['language'];
+  text: string;
+  isLoading: boolean;
+}) {
   const handleSaveAndRun = useRecoilCallback(
     ({ snapshot, set }) =>
       async () => {
@@ -169,13 +175,22 @@ function CodeSnippetRunButton({ language, text }: { language: CodeSnippetProps['
       size="sm"
       className="px-2 text-muted-foreground hover:text-foreground"
       onClick={handleSaveAndRun}
+      disabled={isLoading}
     >
       <SaveAndRunIcon /> Apply
     </Button>
   );
 }
 
-function CodeSnippetCopyButton({ language, text }: { language: CodeSnippetProps['language']; text: string }) {
+function CodeSnippetCopyButton({
+  language,
+  text,
+  isLoading,
+}: {
+  language: CodeSnippetProps['language'];
+  text: string;
+  isLoading: boolean;
+}) {
   const [tooltipMsg, setTooltipMsg] = useState<string>('Copy');
 
   const handleCopy = useCallback(
@@ -192,7 +207,13 @@ function CodeSnippetCopyButton({ language, text }: { language: CodeSnippetProps[
   );
 
   return (
-    <Button variant="ghost" size="sm" className="px-2 text-muted-foreground hover:text-foreground" onClick={handleCopy}>
+    <Button
+      variant="ghost"
+      size="sm"
+      className="px-2 text-muted-foreground hover:text-foreground"
+      onClick={handleCopy}
+      disabled={isLoading}
+    >
       <CopyIcon className="mr-1" /> {tooltipMsg}
     </Button>
   );
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
index 19459516d9..b54f18846e 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
@@ -1,5 +1,6 @@
 import { codeEditorShowCodeEditorAtom } from '@/app/atoms/codeEditorAtom';
 import { CodeEditorBody } from '@/app/ui/menus/CodeEditor/CodeEditorBody';
+import { CodeEditorDiffButtons } from '@/app/ui/menus/CodeEditor/CodeEditorDiffButtons';
 import { CodeEditorEffects } from '@/app/ui/menus/CodeEditor/CodeEditorEffects';
 import { CodeEditorEmptyState } from '@/app/ui/menus/CodeEditor/CodeEditorEmptyState';
 import { CodeEditorEscapeEffect } from '@/app/ui/menus/CodeEditor/CodeEditorEscapeEffect';
@@ -74,7 +75,7 @@ export const CodeEditor = () => {
             <SaveChangesAlert editorInst={editorInst} />
 
             <CodeEditorHeader editorInst={editorInst} />
-
+            <CodeEditorDiffButtons />
             <CodeEditorBody editorInst={editorInst} setEditorInst={setEditorInst} />
 
             <CodeEditorEmptyState editorInst={editorInst} />
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx
index e3037e95d2..dc2ce21aa9 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx
@@ -3,15 +3,17 @@ import {
   codeEditorCodeStringAtom,
   codeEditorDiffEditorContentAtom,
   codeEditorEditorContentAtom,
+  codeEditorShowDiffEditorAtom,
 } from '@/app/atoms/codeEditorAtom';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { ThumbDownIcon, ThumbUpIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
-import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
-import { useRecoilCallback } from 'recoil';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 export const CodeEditorDiffButtons = () => {
+  const showDiffEditor = useRecoilValue(codeEditorShowDiffEditorAtom);
+
   const handleDiffReject = useRecoilCallback(
     ({ set, snapshot }) =>
       async () => {
@@ -64,19 +66,17 @@ export const CodeEditorDiffButtons = () => {
     []
   );
 
+  if (!showDiffEditor) return null;
+
   return (
-    <div className="code-editor-diff-button flex items-center">
-      <TooltipPopover label={'Reject'} side="bottom">
-        <Button onClick={handleDiffReject} size="icon-sm" variant="ghost">
-          <ThumbDownIcon className="text-destructive" />
-        </Button>
-      </TooltipPopover>
+    <div className="code-editor-diff-button grid grid-cols-2 items-center gap-2 px-2 pb-2 text-foreground">
+      <Button onClick={handleDiffReject} variant="destructive">
+        <ThumbDownIcon className="mr-1" /> Reject
+      </Button>
 
-      <TooltipPopover label={'Accept'} side="bottom">
-        <Button onClick={handleDiffAccept} size="icon-sm" variant="ghost">
-          <ThumbUpIcon className="text-success" />
-        </Button>
-      </TooltipPopover>
+      <Button onClick={handleDiffAccept} variant="success">
+        <ThumbUpIcon className="mr-1" /> Accept
+      </Button>
     </div>
   );
 };
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
index a71433fc5c..36b65eb332 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
@@ -11,7 +11,6 @@ import { codeCellIsAConnection, getCodeCell, getConnectionUuid, getLanguage } fr
 import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { useConnectionsFetcher } from '@/app/ui/hooks/useConnectionsFetcher';
-import { CodeEditorDiffButtons } from '@/app/ui/menus/CodeEditor/CodeEditorDiffButtons';
 import { CodeEditorRefButton } from '@/app/ui/menus/CodeEditor/CodeEditorRefButton';
 import { SnippetsPopover } from '@/app/ui/menus/CodeEditor/SnippetsPopover';
 import { useCancelRun } from '@/app/ui/menus/CodeEditor/hooks/useCancelRun';
@@ -195,39 +194,33 @@ export const CodeEditorHeader = ({ editorInst }: CodeEditorHeaderProps) => {
           </TooltipPopover>
         )}
 
-        {hasPermission && (
+        {hasPermission && !showDiffEditor && (
           <>
-            {showDiffEditor ? (
-              <CodeEditorDiffButtons />
+            {['Python', 'Javascript', 'Formula'].includes(language as string) && <CodeEditorRefButton />}
+
+            {['Python', 'Javascript'].includes(language as string) && <SnippetsPopover editorInst={editorInst} />}
+
+            {!isRunningComputation ? (
+              <TooltipPopover
+                label={`Save & run`}
+                shortcut={`${KeyboardSymbols.Command}${KeyboardSymbols.Enter}`}
+                side="bottom"
+              >
+                <Button
+                  id="QuadraticCodeEditorRunButtonID"
+                  onClick={saveAndRunCell}
+                  size="icon-sm"
+                  className="mx-1 rounded-full"
+                >
+                  <SaveAndRunIcon />
+                </Button>
+              </TooltipPopover>
             ) : (
-              <>
-                {['Python', 'Javascript', 'Formula'].includes(language as string) && <CodeEditorRefButton />}
-
-                {['Python', 'Javascript'].includes(language as string) && <SnippetsPopover editorInst={editorInst} />}
-
-                {!isRunningComputation ? (
-                  <TooltipPopover
-                    label={`Save & run`}
-                    shortcut={`${KeyboardSymbols.Command}${KeyboardSymbols.Enter}`}
-                    side="bottom"
-                  >
-                    <Button
-                      id="QuadraticCodeEditorRunButtonID"
-                      onClick={saveAndRunCell}
-                      size="icon-sm"
-                      className="mx-1 rounded-full"
-                    >
-                      <SaveAndRunIcon />
-                    </Button>
-                  </TooltipPopover>
-                ) : (
-                  <TooltipPopover label={`Cancel execution`} shortcut={`${KeyboardSymbols.Command} Esc`} side="bottom">
-                    <Button onClick={cancelRun} size="icon-sm" className="mx-1 rounded-full">
-                      <SaveAndRunStopIcon />
-                    </Button>
-                  </TooltipPopover>
-                )}
-              </>
+              <TooltipPopover label={`Cancel execution`} shortcut={`${KeyboardSymbols.Command} Esc`} side="bottom">
+                <Button onClick={cancelRun} size="icon-sm" className="mx-1 rounded-full">
+                  <SaveAndRunStopIcon />
+                </Button>
+              </TooltipPopover>
             )}
           </>
         )}

From 58db43c466cc557ad3a3ab6c52fbc7748baedd2c Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 18 Nov 2024 16:15:52 -0700
Subject: [PATCH 36/62] updates

---
 .../src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx   | 2 +-
 .../src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
index a36ab88d22..8f5a81afab 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
@@ -177,7 +177,7 @@ function CodeSnippetRunButton({
       onClick={handleSaveAndRun}
       disabled={isLoading}
     >
-      <SaveAndRunIcon /> Apply
+      <SaveAndRunIcon /> Apply & run
     </Button>
   );
 }
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx
index dc2ce21aa9..d047a15b6e 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorDiffButtons.tsx
@@ -70,11 +70,11 @@ export const CodeEditorDiffButtons = () => {
 
   return (
     <div className="code-editor-diff-button grid grid-cols-2 items-center gap-2 px-2 pb-2 text-foreground">
-      <Button onClick={handleDiffReject} variant="destructive">
+      <Button onClick={handleDiffReject} variant="destructive" size="sm">
         <ThumbDownIcon className="mr-1" /> Reject
       </Button>
 
-      <Button onClick={handleDiffAccept} variant="success">
+      <Button onClick={handleDiffAccept} variant="success" size="sm">
         <ThumbUpIcon className="mr-1" /> Accept
       </Button>
     </div>

From 921d17f422f310a63c750848698db82315b01f84 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 18 Nov 2024 16:44:48 -0700
Subject: [PATCH 37/62] fix bug

---
 ...onnectionSchemaBrowserTableQueryAction.tsx | 25 +++++++++++++------
 .../connections/ConnectionSchemaBrowser.tsx   |  6 ++++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx b/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
index 28736c4f28..f6e42d9ae4 100644
--- a/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
+++ b/quadratic-client/src/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction.tsx
@@ -1,3 +1,4 @@
+import ConditionalWrapper from '@/app/ui/components/ConditionalWrapper';
 import { useSaveAndRunCell } from '@/app/ui/menus/CodeEditor/hooks/useSaveAndRunCell';
 import { newNewFileFromStateConnection } from '@/shared/hooks/useNewFileFromState';
 import { Button } from '@/shared/shadcn/ui/button';
@@ -22,19 +23,27 @@ export const useConnectionSchemaBrowserTableQueryActionNewFile = ({
 }) => {
   return {
     TableQueryAction: ({ query }: { query: string }) => {
+      const isValidQuery = query.length > 0;
       const to = newNewFileFromStateConnection({ query, isPrivate, teamUuid, connectionType, connectionUuid });
       return (
-        <Link
-          to={to}
-          reloadDocument
-          onClick={() => {
-            mixpanel.track('[Connections].schemaViewer.newFileFromTable');
-          }}
+        <ConditionalWrapper
+          condition={isValidQuery}
+          Wrapper={({ children }) => (
+            <Link
+              to={to}
+              reloadDocument
+              onClick={() => {
+                mixpanel.track('[Connections].schemaViewer.newFileFromTable');
+              }}
+            >
+              {children}
+            </Link>
+          )}
         >
-          <Button size="sm" disabled={to.length === 0}>
+          <Button size="sm" disabled={!isValidQuery}>
             New file with selected table
           </Button>
-        </Link>
+        </ConditionalWrapper>
       );
     },
   };
diff --git a/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx b/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx
index ad8166a349..b029121c4a 100644
--- a/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx
+++ b/quadratic-client/src/shared/components/connections/ConnectionSchemaBrowser.tsx
@@ -47,7 +47,11 @@ export const ConnectionSchemaBrowser = ({
         </div>
         <div className="flex flex-row-reverse items-center gap-1">
           <TableQueryAction
-            query={data ? getTableQuery({ table: data.tables[selectedTableIndex], connectionKind: data.type }) : ''}
+            query={
+              !isLoading && data
+                ? getTableQuery({ table: data.tables[selectedTableIndex], connectionKind: data.type })
+                : ''
+            }
           />
           <TooltipPopover label="Reload schema">
             <Button onClick={reloadSchema} variant="ghost" size="icon-sm" className="text-muted-foreground">

From 7f952db6a641128c923bc205fab955da2442918d Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Mon, 18 Nov 2024 16:51:10 -0700
Subject: [PATCH 38/62] Update Toolbar.tsx

---
 quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx b/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx
index eae609a77a..4c263067e2 100644
--- a/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx
+++ b/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx
@@ -12,7 +12,7 @@ export const Toolbar = () => {
       <div className="w-24 flex-shrink-0 border-r border-border md:w-40">
         <CursorPosition />
       </div>
-      <div className="no-scrollbar flex flex-grow items-stretch overflow-auto lg:justify-center">
+      <div className="no-scrollbar flex flex-grow items-stretch overflow-y-hidden overflow-x-scroll lg:justify-center">
         {permissions.includes('FILE_EDIT') && <FormattingBar />}
       </div>
       <div className="flex items-center justify-end lg:w-40">

From 8a6fdeed155283eee68eead3d8f24f0e73e68bd7 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 19 Nov 2024 09:51:23 -0700
Subject: [PATCH 39/62] fix 1px issue

---
 quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx   | 2 +-
 .../app/ui/menus/CodeEditor/panels/CodeEditorPanelsResize.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
index 1305635cb8..54d263ddeb 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
@@ -40,7 +40,7 @@ export const CodeEditor = () => {
           <div
             ref={codeEditorRef}
             className={cn(
-              'relative flex h-full flex-col border-t border-transparent bg-background',
+              'relative -mt-[1px] flex h-full flex-col border-t border-transparent bg-background',
               codeEditorPanelData.panelPosition === 'left' ? 'flex-row border-t border-border' : 'flex-col'
             )}
             style={{
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelsResize.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelsResize.tsx
index 6639c76cd6..ccfccb14a7 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelsResize.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelsResize.tsx
@@ -42,7 +42,7 @@ export const CodeEditorPanels = memo(({ codeEditorRef }: CodeEditorPanelsResizeP
         <>
           {/* left-to-right: outer edge */}
           <ResizeControl
-            style={{ left: `-1px` }}
+            style={{ left: `0px` }}
             setState={(mouseEvent) => {
               const offsetFromRight = window.innerWidth - mouseEvent.x;
               const min = MIN_WIDTH_PANEL + MIN_WIDTH_EDITOR;
@@ -88,7 +88,7 @@ export const CodeEditorPanels = memo(({ codeEditorRef }: CodeEditorPanelsResizeP
         <>
           {/* top-to-bottom: editor width */}
           <ResizeControl
-            style={{ left: '-1px' }}
+            style={{ left: '0px' }}
             setState={(mouseEvent) => {
               const offsetFromRight = window.innerWidth - mouseEvent.x;
               const min = MIN_WIDTH_EDITOR;

From 6a55d208fde62e8a8abcadcedbb7a6bce79fa444 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 19 Nov 2024 10:19:59 -0700
Subject: [PATCH 40/62] small fixes

---
 .../src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx   | 4 ++--
 quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
index 8f5a81afab..2c12c38f00 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/CodeSnippet.tsx
@@ -173,7 +173,7 @@ function CodeSnippetRunButton({
     <Button
       variant="ghost"
       size="sm"
-      className="px-2 text-muted-foreground hover:text-foreground"
+      className="bg-background px-2 text-muted-foreground hover:text-foreground"
       onClick={handleSaveAndRun}
       disabled={isLoading}
     >
@@ -210,7 +210,7 @@ function CodeSnippetCopyButton({
     <Button
       variant="ghost"
       size="sm"
-      className="px-2 text-muted-foreground hover:text-foreground"
+      className="bg-background px-2 text-muted-foreground hover:text-foreground"
       onClick={handleCopy}
       disabled={isLoading}
     >
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
index 362a18b49a..fc8c2ac947 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
@@ -41,7 +41,7 @@ export const CodeEditor = () => {
           <div
             ref={codeEditorRef}
             className={cn(
-              'relative -mt-[1px] flex h-full flex-col border-t border-transparent bg-background',
+              'relative -mt-[1px] flex h-full flex-col overflow-auto border-t border-transparent bg-background',
               codeEditorPanelData.panelPosition === 'left' ? 'flex-row border-t border-border' : 'flex-col'
             )}
             style={{

From 335b64066545305c4e3391d4e5e27e60aca13507 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Tue, 19 Nov 2024 23:45:11 +0530
Subject: [PATCH 41/62] unsafe unwrap

---
 quadratic-connection/src/proxy.rs | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/quadratic-connection/src/proxy.rs b/quadratic-connection/src/proxy.rs
index 2575dcaf77..b5e02ca7a0 100644
--- a/quadratic-connection/src/proxy.rs
+++ b/quadratic-connection/src/proxy.rs
@@ -33,13 +33,11 @@ pub(crate) async fn axum_to_reqwest(
         .into_iter()
         .filter(|(name, _)| !headers_to_ignore.contains(&name.as_str()))
         .map(|(name, value)| {
-            if name.to_string().starts_with(PROXY_HEADER_PREFIX) {
-                (
-                    name.to_string().replace(PROXY_HEADER_PREFIX, ""),
-                    value.to_str().unwrap().to_string(),
-                )
+            let name = name.as_str();
+            if let Some(name) = name.strip_prefix(PROXY_HEADER_PREFIX) {
+                (name, value)
             } else {
-                (name.to_string(), value.to_str().unwrap().to_string())
+                (name, value)
             }
         })
     {

From 6044cf62030c5ac3c333677af1ac030e4a36d1c1 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Wed, 20 Nov 2024 01:12:32 +0530
Subject: [PATCH 42/62] mask x-proxy-authorization header in logs

---
 quadratic-connection/src/server.rs | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/quadratic-connection/src/server.rs b/quadratic-connection/src/server.rs
index 2150f39a65..43761bbc3c 100644
--- a/quadratic-connection/src/server.rs
+++ b/quadratic-connection/src/server.rs
@@ -8,10 +8,11 @@ use axum::{
     routing::{any, get, post},
     Extension, Json, Router,
 };
+use http::HeaderName;
 use quadratic_rust_shared::auth::jwt::get_jwks;
 use quadratic_rust_shared::sql::Connection;
 use serde::{Deserialize, Serialize};
-use std::{iter::once, time::Duration};
+use std::time::Duration;
 use tokio::time;
 use tower_http::{
     cors::{Any, CorsLayer},
@@ -85,6 +86,12 @@ pub(crate) fn app(state: State) -> Result<Router> {
     // get the auth middleware
     let auth = get_middleware(state.clone());
 
+    // sensitive headers, that are excluded from tracing logs
+    let sensitive_headers = [
+        AUTHORIZATION,
+        HeaderName::from_static("x-proxy-authorization"),
+    ];
+
     // Routes apply in reverse order, so placing a route before the middleware
     // usurps the middleware.
     let app = Router::new()
@@ -126,7 +133,9 @@ pub(crate) fn app(state: State) -> Result<Router> {
         .route("/health", get(healthcheck))
         //
         // don't show authorization header in logs
-        .layer(SetSensitiveHeadersLayer::new(once(AUTHORIZATION)))
+        .layer(SetSensitiveHeadersLayer::new(
+            sensitive_headers.iter().cloned(),
+        ))
         //
         // cors
         .layer(cors)

From b82966f3982fbe2efbbe698b623e745fab81bd77 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 19 Nov 2024 13:57:30 -0700
Subject: [PATCH 43/62] Update ResizeControl.css

---
 quadratic-client/src/app/ui/components/ResizeControl.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/ui/components/ResizeControl.css b/quadratic-client/src/app/ui/components/ResizeControl.css
index 2e92cc533b..53171ff095 100644
--- a/quadratic-client/src/app/ui/components/ResizeControl.css
+++ b/quadratic-client/src/app/ui/components/ResizeControl.css
@@ -1,7 +1,7 @@
 /* Shared styles for the 1px line */
 .resize-control {
   background-color: hsl(var(--border));
-  z-index: 5;
+  z-index: 20;
 }
 
 /* Vertical control, left side */

From e455a0b3e027842230fba3b63829d06e2e98e86d Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 19 Nov 2024 14:31:53 -0700
Subject: [PATCH 44/62] initial commit

---
 quadratic-client/src/dashboard/components/DashboardSidebar.tsx  | 2 +-
 .../src/dashboard/components/FilesListEmptyState.tsx            | 1 +
 quadratic-client/src/dashboard/components/NewFileButton.tsx     | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
index a99f849d79..85ac190aae 100644
--- a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
+++ b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
@@ -193,7 +193,7 @@ function SidebarNavLinkCreateButton({
           size="icon-sm"
           className="absolute right-2 top-1 ml-auto !bg-transparent opacity-30 hover:opacity-100"
         >
-          <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}>
+          <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)} reloadDocument>
             <AddIcon />
           </Link>
         </Button>
diff --git a/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx b/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx
index a2aed802ea..b4d8b38906 100644
--- a/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx
+++ b/quadratic-client/src/dashboard/components/FilesListEmptyState.tsx
@@ -22,6 +22,7 @@ export const FilesListEmptyState = ({ isPrivate = false }: { isPrivate?: boolean
             You don’t have any files yet.{' '}
             <Link
               to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}
+              reloadDocument
               className="underline hover:text-primary"
               onClick={() => {
                 mixpanel.track('[FilesEmptyState].clickCreateBlankFile');
diff --git a/quadratic-client/src/dashboard/components/NewFileButton.tsx b/quadratic-client/src/dashboard/components/NewFileButton.tsx
index 4670d8f3e4..a568937a91 100644
--- a/quadratic-client/src/dashboard/components/NewFileButton.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileButton.tsx
@@ -36,7 +36,7 @@ export default function NewFileButton({ isPrivate }: { isPrivate: boolean }) {
 
   return (
     <div className="flex flex-row-reverse gap-2">
-      <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)}>
+      <Link to={isPrivate ? ROUTES.CREATE_FILE_PRIVATE(teamUuid) : ROUTES.CREATE_FILE(teamUuid)} reloadDocument>
         <Button variant="default">New file</Button>
       </Link>
       <input

From 2f67599d6e919ad6a876e31ff4440ec2559710a1 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 19 Nov 2024 16:13:12 -0700
Subject: [PATCH 45/62] Update AIAnalystExamplePrompts.tsx

---
 .../src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
index 5e1bf75031..500477d43c 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
@@ -28,7 +28,8 @@ export function AIAnalystExamplePrompts() {
   const { submitPrompt } = useSubmitAIAnalystPrompt();
 
   return (
-    <div className="flex flex-col gap-2 px-2 pt-1">
+    <div className="flex flex-col justify-center gap-2 px-2 pt-1">
+      <h2 className="mb-1 text-center text-lg font-bold">What can I help with?</h2>
       {examples.map(({ title, description, icon, prompt }) => (
         <button
           key={title}

From 0c9766b8703ff4597fe2dfeca93565ca1e35645a Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 19 Nov 2024 16:58:12 -0700
Subject: [PATCH 46/62] updates

---
 .../src/app/atoms/aiAnalystAtom.ts            | 20 ++++++++++++++++---
 .../src/app/ui/QuadraticSidebar.tsx           | 16 +++++++++++++--
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/quadratic-client/src/app/atoms/aiAnalystAtom.ts b/quadratic-client/src/app/atoms/aiAnalystAtom.ts
index 2b2b9ba0de..4ba67d8dbc 100644
--- a/quadratic-client/src/app/atoms/aiAnalystAtom.ts
+++ b/quadratic-client/src/app/atoms/aiAnalystAtom.ts
@@ -36,11 +36,14 @@ export const aiAnalystAtom = atom<AIAnalystState>({
   effects: [
     async ({ getPromise, setSelf, trigger }) => {
       if (trigger === 'get') {
+        // Determine if we want to override the default showAIAnalyst value on initialization
+        const aiAnalystOpenCount = getAiAnalystOpenCount();
         const isSheetEmpty = sheets.sheet.bounds.type === 'empty';
-        if (isSheetEmpty) {
+        const showAIAnalyst = aiAnalystOpenCount <= 3 ? true : isSheetEmpty;
+        if (showAIAnalyst) {
           setSelf({
             ...defaultAIAnalystState,
-            showAIAnalyst: true,
+            showAIAnalyst,
           });
         }
 
@@ -52,7 +55,7 @@ export const aiAnalystAtom = atom<AIAnalystState>({
             const chats = await aiAnalystOfflineChats.loadChats();
             setSelf({
               ...defaultAIAnalystState,
-              showAIAnalyst: isSheetEmpty,
+              showAIAnalyst,
               chats,
             });
           } catch (error) {
@@ -271,3 +274,14 @@ export const aiAnalystCurrentChatMessagesCountAtom = selector<number>({
   key: 'aiAnalystCurrentChatMessagesCountAtom',
   get: ({ get }) => getPromptMessages(get(aiAnalystCurrentChatAtom).messages).length,
 });
+
+const STORAGE_KEY = 'aiAnalystOpenCount';
+export function getAiAnalystOpenCount() {
+  const count = window.localStorage.getItem(STORAGE_KEY);
+  return count ? parseInt(count) : 0;
+}
+export function incrementAiAnalystOpenCount() {
+  const count = getAiAnalystOpenCount();
+  const newCount = count + 1;
+  window.localStorage.setItem(STORAGE_KEY, newCount.toString());
+}
diff --git a/quadratic-client/src/app/ui/QuadraticSidebar.tsx b/quadratic-client/src/app/ui/QuadraticSidebar.tsx
index 1d07bd83ee..40bf2e770d 100644
--- a/quadratic-client/src/app/ui/QuadraticSidebar.tsx
+++ b/quadratic-client/src/app/ui/QuadraticSidebar.tsx
@@ -1,7 +1,7 @@
 import { isAvailableBecauseCanEditFile, isAvailableBecauseFileLocationIsAccessibleAndWriteable } from '@/app/actions';
 import { Action } from '@/app/actions/actions';
 import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
-import { showAIAnalystAtom } from '@/app/atoms/aiAnalystAtom';
+import { incrementAiAnalystOpenCount, showAIAnalystAtom } from '@/app/atoms/aiAnalystAtom';
 import { codeEditorShowCodeEditorAtom } from '@/app/atoms/codeEditorAtom';
 import {
   editorInteractionStateShowCommandPaletteAtom,
@@ -75,7 +75,19 @@ export const QuadraticSidebar = () => {
       <div className="mt-2 flex flex-col items-center gap-1">
         {canEditFile && isAuthenticated && (
           <SidebarTooltip label={toggleAIChat.label} shortcut={keyboardShortcutEnumToDisplay(Action.ToggleAIAnalyst)}>
-            <SidebarToggle pressed={showAIAnalyst} onPressedChange={() => setShowAIAnalyst((prev) => !prev)}>
+            <SidebarToggle
+              pressed={showAIAnalyst}
+              onPressedChange={() => {
+                setShowAIAnalyst((prevShowAiAnalyst) => {
+                  // if it's hidden and therefore being opened by the user, count it!
+                  if (prevShowAiAnalyst === false) {
+                    incrementAiAnalystOpenCount();
+                  }
+
+                  return !prevShowAiAnalyst;
+                });
+              }}
+            >
               <AIIcon />
             </SidebarToggle>
           </SidebarTooltip>

From 44dfb2391d643c40026322d20353d3e367b9e202 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 01:09:26 +0530
Subject: [PATCH 47/62] reverse mode display and icon size / pos

---
 .../HTMLGrid/inlineEditor/InlineEditor.tsx    |  6 ++--
 quadratic-client/src/app/gridGL/UI/Cursor.ts  |  2 +-
 quadratic-client/src/app/ui/icons/index.tsx   | 28 -------------------
 .../src/shared/components/Icons.tsx           |  4 +++
 4 files changed, 8 insertions(+), 32 deletions(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index 4d3a7851e1..daa64107bd 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -7,7 +7,7 @@ import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { CURSOR_THICKNESS } from '@/app/gridGL/UI/Cursor';
 import { colors } from '@/app/theme/colors';
-import { SidebarRightIcon } from '@/app/ui/icons';
+import { DockToLeftIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
 import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 import { useCallback } from 'react';
@@ -53,7 +53,7 @@ export const InlineEditor = () => {
               boxSizing: 'content-box',
               position: 'absolute',
               display: 'flex',
-              alignItems: 'center',
+              alignItems: 'flex-start',
               borderRadius: '0',
               padding: '0',
               height: `${height}px`,
@@ -65,7 +65,7 @@ export const InlineEditor = () => {
               inlineEditorHandler.openCodeEditor();
             }}
           >
-            <SidebarRightIcon style={{ color: 'white', width: '20px', height: '20px' }} />
+            <DockToLeftIcon style={{ color: 'white', width: '20px', height: '20px' }} />
           </Button>
         </TooltipPopover>
       ) : null}
diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts
index ee329b7e1f..2c5ee652a2 100644
--- a/quadratic-client/src/app/gridGL/UI/Cursor.ts
+++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts
@@ -256,7 +256,7 @@ export class Cursor extends Container {
     if (!inlineShowing) return;
 
     const { visible, editMode, formula } = pixiAppSettings.inlineEditorState;
-    if (!visible || editMode) return;
+    if (!visible || !editMode) return;
 
     let { x, y, width, height } = sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y);
     width = Math.max(inlineEditorHandler.width + CURSOR_THICKNESS * (formula ? 1 : 2), width);
diff --git a/quadratic-client/src/app/ui/icons/index.tsx b/quadratic-client/src/app/ui/icons/index.tsx
index 704235855e..63b6149e90 100644
--- a/quadratic-client/src/app/ui/icons/index.tsx
+++ b/quadratic-client/src/app/ui/icons/index.tsx
@@ -180,31 +180,3 @@ export const BoxIcon = (props: SvgIconProps) => (
     <path d="M8 17.425V10.575L2 7.1V13.95L8 17.425ZM10 17.425L16 13.95V7.1L10 10.575V17.425ZM9 8.85L14.925 5.425L9 2L3.075 5.425L9 8.85ZM1 15.7C0.683333 15.5167 0.4375 15.275 0.2625 14.975C0.0875 14.675 0 14.3417 0 13.975V6.025C0 5.65833 0.0875 5.325 0.2625 5.025C0.4375 4.725 0.683333 4.48333 1 4.3L8 0.275C8.31667 0.0916667 8.65 0 9 0C9.35 0 9.68333 0.0916667 10 0.275L17 4.3C17.3167 4.48333 17.5625 4.725 17.7375 5.025C17.9125 5.325 18 5.65833 18 6.025V13.975C18 14.3417 17.9125 14.675 17.7375 14.975C17.5625 15.275 17.3167 15.5167 17 15.7L10 19.725C9.68333 19.9083 9.35 20 9 20C8.65 20 8.31667 19.9083 8 19.725L1 15.7Z" />
   </SvgIcon>
 );
-
-export const SidebarRightIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect
-        width="18"
-        height="18"
-        rx="3"
-        transform="matrix(-1 0 0 1 21 3)"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <line
-        x1="1"
-        y1="-1"
-        x2="17"
-        y2="-1"
-        transform="matrix(4.37114e-08 1 1 -4.37114e-08 16 3)"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  </SvgIcon>
-);
diff --git a/quadratic-client/src/shared/components/Icons.tsx b/quadratic-client/src/shared/components/Icons.tsx
index 905cbad643..3ad366a91c 100644
--- a/quadratic-client/src/shared/components/Icons.tsx
+++ b/quadratic-client/src/shared/components/Icons.tsx
@@ -216,6 +216,10 @@ export const DecimalIncreaseIcon: IconComponent = (props) => {
   return <Icon {...props}>decimal_increase</Icon>;
 };
 
+export const DockToLeftIcon: IconComponent = (props) => {
+  return <Icon {...props}>dock_to_left</Icon>;
+};
+
 export const DeleteIcon: IconComponent = (props) => {
   return <Icon {...props}>delete</Icon>;
 };

From 5933819a5a8bcf7d634a86e8c67e13d742d5c278 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 01:13:07 +0530
Subject: [PATCH 48/62] fix height

---
 .../src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index daa64107bd..df9cebf0c4 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -27,7 +27,7 @@ export const InlineEditor = () => {
   height += CURSOR_THICKNESS * 1.5;
   const inlineShowing = inlineEditorHandler.getShowing();
   if (inlineShowing) {
-    height = Math.max(height, sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y).height);
+    height = Math.min(height, sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y).height);
   }
 
   return (

From 5809b4afc0079e43dc90d4afe197cba6d3b2c3b5 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 01:36:01 +0530
Subject: [PATCH 49/62] revert height

---
 .../src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
index df9cebf0c4..daa64107bd 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx
@@ -27,7 +27,7 @@ export const InlineEditor = () => {
   height += CURSOR_THICKNESS * 1.5;
   const inlineShowing = inlineEditorHandler.getShowing();
   if (inlineShowing) {
-    height = Math.min(height, sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y).height);
+    height = Math.max(height, sheets.sheet.getCellOffsets(inlineShowing.x, inlineShowing.y).height);
   }
 
   return (

From 987a7e7514bab97905d8a92a9dbe2d248786efcd Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Wed, 20 Nov 2024 13:48:16 -0700
Subject: [PATCH 50/62] fixes

---
 .../AIAnalyst/AIAnalystExamplePrompts.tsx     | 40 ++++++++++++++++++-
 .../ui/menus/AIAnalyst/AIAnalystHeader.tsx    | 24 +++++------
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
index 500477d43c..84499d7c6e 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
@@ -2,6 +2,7 @@ import { sheets } from '@/app/grid/controller/Sheets';
 import { useSubmitAIAnalystPrompt } from '@/app/ui/menus/AIAnalyst/hooks/useSubmitAIAnalystPrompt';
 import { CodeIcon, InsertChartIcon, TableIcon } from '@/shared/components/Icons';
 import mixpanel from 'mixpanel-browser';
+import { useEffect, useState } from 'react';
 
 const examples = [
   {
@@ -29,7 +30,7 @@ export function AIAnalystExamplePrompts() {
 
   return (
     <div className="flex flex-col justify-center gap-2 px-2 pt-1">
-      <h2 className="mb-1 text-center text-lg font-bold">What can I help with?</h2>
+      <TypewriterHeader />
       {examples.map(({ title, description, icon, prompt }) => (
         <button
           key={title}
@@ -53,3 +54,40 @@ export function AIAnalystExamplePrompts() {
     </div>
   );
 }
+
+function TypewriterHeader() {
+  const fullText = 'What can I help with?';
+  const [displayText, setDisplayText] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [startTyping, setStartTyping] = useState(false);
+
+  // Delay starting the effect just a tad — it looks better
+  useEffect(() => {
+    const initialDelay = setTimeout(() => {
+      setStartTyping(true);
+    }, 80);
+
+    return () => clearTimeout(initialDelay);
+  }, []);
+
+  // Type out each character, adjust the speed as necessary
+  useEffect(() => {
+    if (startTyping && currentIndex < fullText.length) {
+      const timeout = setTimeout(() => {
+        setDisplayText((prevText) => prevText + fullText[currentIndex]);
+        setCurrentIndex((prevIndex) => prevIndex + 1);
+      }, 30);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [currentIndex, startTyping]);
+
+  return (
+    <h2 className="mb-1 flex items-center justify-center text-center text-lg font-bold">
+      {displayText}&nbsp;
+      <span className="relative -top-[1px] h-5/6 w-[2px] animate-pulse bg-primary"></span>
+    </h2>
+  );
+}
+
+export default TypewriterHeader;
diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystHeader.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystHeader.tsx
index 0bf3c70a90..f59d64d7cd 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystHeader.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystHeader.tsx
@@ -41,18 +41,6 @@ export function AIAnalystHeader({ textareaRef }: AIAnalystHeaderProps) {
       </span>
 
       <div className="flex items-center gap-2">
-        <TooltipPopover label="Previous chats">
-          <Button
-            variant={showChatHistory ? 'default' : 'ghost'}
-            size="icon-sm"
-            className={cn(!showChatHistory && 'text-muted-foreground hover:text-foreground')}
-            disabled={!showChatHistory && (loading || chatsCount === 0)}
-            onClick={() => setShowChatHistory((prev) => !prev)}
-          >
-            <HistoryIcon />
-          </Button>
-        </TooltipPopover>
-
         <TooltipPopover label="New chat">
           <Button
             variant="ghost"
@@ -73,6 +61,18 @@ export function AIAnalystHeader({ textareaRef }: AIAnalystHeaderProps) {
           </Button>
         </TooltipPopover>
 
+        <TooltipPopover label="Previous chats">
+          <Button
+            variant={showChatHistory ? 'default' : 'ghost'}
+            size="icon-sm"
+            className={cn(!showChatHistory && 'text-muted-foreground hover:text-foreground')}
+            disabled={!showChatHistory && (loading || chatsCount === 0)}
+            onClick={() => setShowChatHistory((prev) => !prev)}
+          >
+            <HistoryIcon />
+          </Button>
+        </TooltipPopover>
+
         <TooltipPopover label="Close" side="bottom">
           <Button
             variant="ghost"

From 3980d4156fb2fa3f851c6f7ea6eb35242fde2359 Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Wed, 20 Nov 2024 13:49:14 -0700
Subject: [PATCH 51/62] Update AIAnalystExamplePrompts.tsx

---
 .../src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
index 84499d7c6e..ccc3c0d2f8 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystExamplePrompts.tsx
@@ -61,11 +61,11 @@ function TypewriterHeader() {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [startTyping, setStartTyping] = useState(false);
 
-  // Delay starting the effect just a tad — it looks better
+  // Delay starting the effect just a tad — it looks better, especially on initial page load
   useEffect(() => {
     const initialDelay = setTimeout(() => {
       setStartTyping(true);
-    }, 80);
+    }, 50);
 
     return () => clearTimeout(initialDelay);
   }, []);

From d612ae23db61b41f4b91caa2e16e2e19dd1752d1 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 03:34:18 +0530
Subject: [PATCH 52/62] Cmd K to toggle AI sidepanel

---
 quadratic-client/src/app/keyboard/defaults.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quadratic-client/src/app/keyboard/defaults.ts b/quadratic-client/src/app/keyboard/defaults.ts
index c51e65b26e..994f86e823 100644
--- a/quadratic-client/src/app/keyboard/defaults.ts
+++ b/quadratic-client/src/app/keyboard/defaults.ts
@@ -354,7 +354,7 @@ export const defaultShortcuts: ActionShortcut = {
     windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.Semicolon]],
   },
   [Action.ToggleAIAnalyst]: {
-    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.L]],
-    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.L]],
+    mac: [[MacModifiers.Cmd, Keys.K]],
+    windows: [[WindowsModifiers.Ctrl, Keys.K]],
   },
 };

From bd6b546d0069cf126d9e650070789432281dbde0 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 03:48:47 +0530
Subject: [PATCH 53/62] focusGrid on app open

---
 .../src/app/ui/components/AIUserMessageForm.tsx  |  8 ++++----
 .../src/app/ui/menus/AIAnalyst/AIAnalyst.tsx     | 16 ++++++++++++++--
 .../menus/CodeEditor/AIAssistant/AIAssistant.tsx |  5 +++--
 .../CodeEditor/panels/CodeEditorPanelBottom.tsx  |  2 +-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
index 3ef2fe939d..74fe5e8ae1 100644
--- a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
+++ b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
@@ -14,7 +14,7 @@ import { SetterOrUpdater } from 'recoil';
 
 export type AIUserMessageFormWrapperProps = {
   textareaRef: React.RefObject<HTMLTextAreaElement>;
-  autoFocus?: boolean;
+  autoFocusRef?: React.RefObject<boolean>;
   initialPrompt?: string;
   messageIndex?: number;
 };
@@ -36,7 +36,7 @@ export const AIUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((props:
   const {
     initialPrompt,
     ctx,
-    autoFocus,
+    autoFocusRef,
     textareaRef: bottomTextareaRef,
     abortController,
     loading,
@@ -58,12 +58,12 @@ export const AIUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((props:
 
   // Focus the input when relevant & the tab comes into focus
   useEffect(() => {
-    if (autoFocus) {
+    if (autoFocusRef?.current) {
       window.requestAnimationFrame(() => {
         textareaRef.current?.focus();
       });
     }
-  }, [autoFocus, textareaRef]);
+  }, [autoFocusRef, textareaRef]);
 
   useEffect(() => {
     if (loading && initialPrompt !== undefined) {
diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
index 96bad46db5..6700843a6d 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
@@ -9,7 +9,7 @@ import { AIAnalystMessages } from '@/app/ui/menus/AIAnalyst/AIAnalystMessages';
 import { AIAnalystUserMessageForm } from '@/app/ui/menus/AIAnalyst/AIAnalystUserMessageForm';
 import { useAIAnalystPanelWidth } from '@/app/ui/menus/AIAnalyst/hooks/useAIAnalystPanelWidth';
 import { cn } from '@/shared/shadcn/utils';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 
 export const AIAnalyst = () => {
@@ -20,6 +20,18 @@ export const AIAnalyst = () => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { panelWidth, setPanelWidth } = useAIAnalystPanelWidth();
 
+  const initialLoadRef = useRef(true);
+  const autoFocusRef = useRef(false);
+  useEffect(() => {
+    if (showAIAnalyst) {
+      if (initialLoadRef.current) {
+        initialLoadRef.current = false;
+      } else {
+        autoFocusRef.current = true;
+      }
+    }
+  }, [showAIAnalyst]);
+
   const handleResize = useCallback(
     (event: MouseEvent) => {
       const panel = aiPanelRef.current;
@@ -67,7 +79,7 @@ export const AIAnalyst = () => {
               <AIAnalystMessages textareaRef={textareaRef} />
 
               <div className="px-2 py-0.5">
-                <AIAnalystUserMessageForm ref={textareaRef} autoFocus={true} textareaRef={textareaRef} />
+                <AIAnalystUserMessageForm ref={textareaRef} autoFocusRef={autoFocusRef} textareaRef={textareaRef} />
                 <AIUserMessageFormDisclaimer />
               </div>
             </>
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/AIAssistant.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/AIAssistant.tsx
index 2ebde3b75c..a61e2fad32 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/AIAssistant.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/AIAssistant/AIAssistant.tsx
@@ -3,15 +3,16 @@ import { AIAssistantMessages } from '@/app/ui/menus/CodeEditor/AIAssistant/AIAss
 import { AIAssistantUserMessageForm } from '@/app/ui/menus/CodeEditor/AIAssistant/AIAssistantUserMessageForm';
 import { useRef } from 'react';
 
-export const AIAssistant = ({ autoFocus }: { autoFocus?: boolean }) => {
+export const AIAssistant = () => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const autoFocusRef = useRef(true);
 
   return (
     <div className="grid h-full grid-rows-[1fr_auto]">
       <AIAssistantMessages textareaRef={textareaRef} />
 
       <div className="flex h-full flex-col justify-end px-2 py-0.5">
-        <AIAssistantUserMessageForm ref={textareaRef} autoFocus={autoFocus} textareaRef={textareaRef} />
+        <AIAssistantUserMessageForm ref={textareaRef} autoFocusRef={autoFocusRef} textareaRef={textareaRef} />
         <AIUserMessageFormDisclaimer />
       </div>
     </div>
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelBottom.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelBottom.tsx
index 1c76c5a1d3..c28a2974bb 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelBottom.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/panels/CodeEditorPanelBottom.tsx
@@ -75,7 +75,7 @@ export function CodeEditorPanelBottom({ schemaBrowser, showAIAssistant }: CodeEd
 
       {showAIAssistant && (
         <TabsContent value="ai-assistant" className="m-0 grow overflow-hidden">
-          {!bottomHidden && <AIAssistant autoFocus={true} />}
+          {!bottomHidden && <AIAssistant />}
         </TabsContent>
       )}
 

From acc11bcd776c50e90c5689aa2637581a845f936c Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 03:54:12 +0530
Subject: [PATCH 54/62] prevent submit prompt when loading

---
 quadratic-client/src/app/ui/components/AIUserMessageForm.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
index 74fe5e8ae1..31f31c387a 100644
--- a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
+++ b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
@@ -115,6 +115,7 @@ export const AIUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((props:
 
             if (event.key === 'Enter' && !(event.ctrlKey || event.shiftKey)) {
               event.preventDefault();
+              if (loading) return;
 
               if (prompt.trim().length === 0) return;
 
@@ -128,6 +129,9 @@ export const AIUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((props:
                 bottomTextareaRef.current?.focus();
               }
             }
+
+            if (loading) return;
+
             if (formOnKeyDown) {
               formOnKeyDown(event);
             }

From 9a6784f9e9d17d15e779be8c05ed10afaa637e13 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 04:04:44 +0530
Subject: [PATCH 55/62] ask ai not to include answer in reply

---
 .../src/app/ai/hooks/useQuadraticContextMessages.tsx            | 2 +-
 quadratic-client/src/app/ai/hooks/useToolUseMessages.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/quadratic-client/src/app/ai/hooks/useQuadraticContextMessages.tsx b/quadratic-client/src/app/ai/hooks/useQuadraticContextMessages.tsx
index df3b11c958..4f0b62a912 100644
--- a/quadratic-client/src/app/ai/hooks/useQuadraticContextMessages.tsx
+++ b/quadratic-client/src/app/ai/hooks/useQuadraticContextMessages.tsx
@@ -26,7 +26,7 @@ ${
     : 'Choose the language of your response based on the context and user prompt.'
 }
 Provide complete code blocks with language syntax highlighting. Don't provide small code snippets of changes.
-Respond in minimum number of words with direct answer. Include a concise explanation of the answer.
+Respond in minimum number of words and include a concise explanation of the actions you are taking. Don't guess the answer itself, just the actions you are taking to respond to the user prompt and what the user can do next.
 `,
         contextType: 'quadraticDocs',
       },
diff --git a/quadratic-client/src/app/ai/hooks/useToolUseMessages.tsx b/quadratic-client/src/app/ai/hooks/useToolUseMessages.tsx
index 35b2672a06..fa1f679d2b 100644
--- a/quadratic-client/src/app/ai/hooks/useToolUseMessages.tsx
+++ b/quadratic-client/src/app/ai/hooks/useToolUseMessages.tsx
@@ -10,7 +10,7 @@ export function useToolUseMessages() {
         content: `Note: This is an internal message for context. Do not quote it in your response.\n\n
 Following are the tools you should use to do actions in the spreadsheet, use them to respond to the user prompt.\n
 
-Include a concise explanation of the actions you are taking to respond to the user prompt.
+Include a concise explanation of the actions you are taking to respond to the user prompt. Never guess the answer itself, just the actions you are taking to respond to the user prompt and what the user can do next.\n
 
 Don't include tool details in your response. Reply in layman's terms what actions you are taking.\n
 

From db741234103823245505cb0490f3297e7eee2b80 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 04:57:24 +0530
Subject: [PATCH 56/62] show ai api errors to user as chat response

---
 quadratic-api/src/routes/ai/anthropic.ts      | 21 ++++++++++---------
 quadratic-api/src/routes/ai/bedrock.ts        | 21 ++++++++++---------
 quadratic-api/src/routes/ai/openai.ts         | 20 +++++++++---------
 .../src/app/ai/hooks/useAIRequestToAPI.tsx    |  7 +++----
 .../src/app/ui/menus/AIAnalyst/AIAnalyst.tsx  | 12 +++++------
 5 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/quadratic-api/src/routes/ai/anthropic.ts b/quadratic-api/src/routes/ai/anthropic.ts
index c12e2064de..bc4f91f5b0 100644
--- a/quadratic-api/src/routes/ai/anthropic.ts
+++ b/quadratic-api/src/routes/ai/anthropic.ts
@@ -28,12 +28,12 @@ anthropic_router.post('/anthropic/chat', validateAccessToken, ai_rate_limiter, a
     });
     response.json(result.content);
   } catch (error: any) {
-    if (error.response) {
-      response.status(error.response.status).json(error.response.data);
-      console.log(error.response.status, error.response.data);
+    if (error instanceof Anthropic.APIError) {
+      response.status(error.status ?? 400).json(error.message);
+      console.log(error.status, error.message);
     } else {
-      response.status(400).json(error.message);
-      console.log(error.message);
+      response.status(400).json(error);
+      console.log(error);
     }
   }
 });
@@ -75,14 +75,15 @@ anthropic_router.post(
       }
     } catch (error: any) {
       if (!response.headersSent) {
-        if (error.response) {
-          response.status(error.response.status).json(error.response.data);
-          console.log(error.response.status, error.response.data);
+        if (error instanceof Anthropic.APIError) {
+          response.status(error.status ?? 400).json(error.message);
+          console.log(error.status, error.message);
         } else {
-          response.status(400).json(error.message);
-          console.log(error.message);
+          response.status(400).json(error);
+          console.log(error);
         }
       } else {
+        response.status(500).json('Error occurred after headers were sent');
         console.error('Error occurred after headers were sent:', error);
       }
     }
diff --git a/quadratic-api/src/routes/ai/bedrock.ts b/quadratic-api/src/routes/ai/bedrock.ts
index 4ca1476065..9b1de6d667 100644
--- a/quadratic-api/src/routes/ai/bedrock.ts
+++ b/quadratic-api/src/routes/ai/bedrock.ts
@@ -1,4 +1,5 @@
 import { AnthropicBedrock } from '@anthropic-ai/bedrock-sdk';
+import Anthropic from '@anthropic-ai/sdk';
 import { BedrockRuntimeClient, ConverseCommand, ConverseStreamCommand } from '@aws-sdk/client-bedrock-runtime';
 import express from 'express';
 import { MODEL_OPTIONS } from 'quadratic-shared/AI_MODELS';
@@ -125,12 +126,12 @@ bedrock_router.post('/bedrock/anthropic/chat', validateAccessToken, ai_rate_limi
     });
     response.json(result.content);
   } catch (error: any) {
-    if (error.response) {
-      response.status(error.response.status).json(error.response.data);
-      console.log(error.response.status, error.response.data);
+    if (error instanceof Anthropic.APIError) {
+      response.status(error.status ?? 400).json(error.message);
+      console.log(error.status, error.message);
     } else {
-      response.status(400).json(error.message);
-      console.log(error.message);
+      response.status(400).json(error);
+      console.log(error);
     }
   }
 });
@@ -173,12 +174,12 @@ bedrock_router.post(
       }
     } catch (error: any) {
       if (!response.headersSent) {
-        if (error.response) {
-          response.status(error.response.status).json(error.response.data);
-          console.log(error.response.status, error.response.data);
+        if (error instanceof Anthropic.APIError) {
+          response.status(error.status ?? 400).json(error.message);
+          console.log(error.status, error.message);
         } else {
-          response.status(400).json(error.message);
-          console.log(error.message);
+          response.status(400).json(error);
+          console.log(error);
         }
       } else {
         console.error('Error occurred after headers were sent:', error);
diff --git a/quadratic-api/src/routes/ai/openai.ts b/quadratic-api/src/routes/ai/openai.ts
index f13c17acd5..e2c6227e73 100644
--- a/quadratic-api/src/routes/ai/openai.ts
+++ b/quadratic-api/src/routes/ai/openai.ts
@@ -26,12 +26,12 @@ openai_router.post('/openai/chat', validateAccessToken, ai_rate_limiter, async (
     });
     response.json(result.choices[0].message);
   } catch (error: any) {
-    if (error.response) {
-      response.status(error.response.status).json(error.response.data);
-      console.log(error.response.status, error.response.data);
+    if (error instanceof OpenAI.APIError) {
+      response.status(error.status ?? 400).json(error.message);
+      console.log(error.status, error.message);
     } else {
-      response.status(400).json(error.message);
-      console.log(error.message);
+      response.status(400).json(error);
+      console.log(error);
     }
   }
 });
@@ -65,12 +65,12 @@ openai_router.post('/openai/chat/stream', validateAccessToken, ai_rate_limiter,
     }
   } catch (error: any) {
     if (!response.headersSent) {
-      if (error.response) {
-        response.status(error.response.status).json(error.response.data);
-        console.log(error.response.status, error.response.data);
+      if (error instanceof OpenAI.APIError) {
+        response.status(error.status ?? 400).json(error.message);
+        console.log(error.status, error.message);
       } else {
-        response.status(400).json(error.message);
-        console.log(error.message);
+        response.status(400).json(error);
+        console.log(error);
       }
     } else {
       console.error('Error occurred after headers were sent:', error);
diff --git a/quadratic-client/src/app/ai/hooks/useAIRequestToAPI.tsx b/quadratic-client/src/app/ai/hooks/useAIRequestToAPI.tsx
index c40f098acf..0287ea26d7 100644
--- a/quadratic-client/src/app/ai/hooks/useAIRequestToAPI.tsx
+++ b/quadratic-client/src/app/ai/hooks/useAIRequestToAPI.tsx
@@ -356,17 +356,16 @@ export function useAIRequestToAPI() {
         });
 
         if (!response.ok) {
+          const data = await response.json();
           const error =
             response.status === 429
               ? 'You have exceeded the maximum number of requests. Please try again later.'
-              : `Looks like there was a problem. Status Code: ${response.status}`;
+              : `Looks like there was a problem. Error: ${data}`;
           setMessages?.((prev) => [
             ...prev.slice(0, -1),
             { role: 'assistant', content: error, contextType: 'userPrompt', model, toolCalls: [] },
           ]);
-          if (response.status !== 429) {
-            console.error(`Error retrieving data from AI API: ${response.status}`);
-          }
+          console.error(`Error retrieving data from AI API. Error: ${data}`);
           return { error: true, content: error, toolCalls: [] };
         }
 
diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
index 6700843a6d..24ef4ed3eb 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
@@ -23,14 +23,12 @@ export const AIAnalyst = () => {
   const initialLoadRef = useRef(true);
   const autoFocusRef = useRef(false);
   useEffect(() => {
-    if (showAIAnalyst) {
-      if (initialLoadRef.current) {
-        initialLoadRef.current = false;
-      } else {
-        autoFocusRef.current = true;
-      }
+    if (initialLoadRef.current) {
+      initialLoadRef.current = false;
+    } else {
+      autoFocusRef.current = true;
     }
-  }, [showAIAnalyst]);
+  }, []);
 
   const handleResize = useCallback(
     (event: MouseEvent) => {

From 4c52080af4941a48622e3c2bcbb01c17f0d2fd29 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 05:02:47 +0530
Subject: [PATCH 57/62] fix focus for new chat

---
 .../src/app/ui/menus/AIAnalyst/AIAnalystUserMessageForm.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystUserMessageForm.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystUserMessageForm.tsx
index f99561f381..5dba2e350f 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystUserMessageForm.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalystUserMessageForm.tsx
@@ -34,6 +34,7 @@ export const AIAnalystUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((
   return (
     <AIUserMessageForm
       {...rest}
+      ref={ref}
       abortController={abortController}
       loading={loading}
       setLoading={setLoading}

From b8411eff7ad8916ad94772ebc51eb46801ad24b8 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 05:10:11 +0530
Subject: [PATCH 58/62] conditional returns

---
 .../src/app/ai/hooks/useCodeCellContextMessages.tsx            | 1 +
 .../src/app/ai/hooks/useVisibleContextMessages.tsx             | 3 ++-
 quadratic-client/src/app/ai/tools/aiToolsSpec.ts               | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/ai/hooks/useCodeCellContextMessages.tsx b/quadratic-client/src/app/ai/hooks/useCodeCellContextMessages.tsx
index 244d977b5b..072cf40cd4 100644
--- a/quadratic-client/src/app/ai/hooks/useCodeCellContextMessages.tsx
+++ b/quadratic-client/src/app/ai/hooks/useCodeCellContextMessages.tsx
@@ -68,6 +68,7 @@ Use any functions that are part of the ${language} library.\n
 A code cell can return only one type of value as specified in the Quadratic documentation.\n
 A code cell cannot display both a chart and return a data frame at the same time.\n
 A code cell cannot display multiple charts at the same time.\n
+Do not use conditional returns in code cells.\n
 Do not use any markdown syntax besides triple backticks for ${language} code blocks.\n
 Do not reply code blocks in plain text, use markdown with triple backticks and language name ${language}.`
 }
diff --git a/quadratic-client/src/app/ai/hooks/useVisibleContextMessages.tsx b/quadratic-client/src/app/ai/hooks/useVisibleContextMessages.tsx
index e84b6cebe1..c7132f90e8 100644
--- a/quadratic-client/src/app/ai/hooks/useVisibleContextMessages.tsx
+++ b/quadratic-client/src/app/ai/hooks/useVisibleContextMessages.tsx
@@ -68,9 +68,10 @@ Add imports to the top of the code cell and do not use any libraries or function
 Use any functions that are part of the code cell language library.\n
 A code cell can return only one type of value as specified in the Quadratic documentation.\n
 A code cell cannot display both a chart and return a data frame at the same time.\n
+Do not use conditional returns in code cells.\n
 A code cell cannot display multiple charts at the same time.\n
 Do not use any markdown syntax besides triple backticks for code cell language code blocks.\n
-Do not reply code blocks in plain text, use markdown with triple backticks and language name code cell language.
+Do not reply code blocks in plain text, use markdown with triple backticks and language name code cell language.\n
 
 ${erroredCodeCells[0].map(({ x, y, language, code_string, std_out, std_err }) => {
   const consoleOutput = {
diff --git a/quadratic-client/src/app/ai/tools/aiToolsSpec.ts b/quadratic-client/src/app/ai/tools/aiToolsSpec.ts
index 7b426b36bb..b0d8557301 100644
--- a/quadratic-client/src/app/ai/tools/aiToolsSpec.ts
+++ b/quadratic-client/src/app/ai/tools/aiToolsSpec.ts
@@ -223,6 +223,7 @@ The required location (x,y) for this code cell is one which satisfies the follow
  - If there are multiple tables or data sources being referenced, place the code cell in a location that provides a good balance between proximity to all referenced data and maintaining readability of the currently open sheet.\n
  - Consider the overall layout and organization of the currently open sheet when placing the code cell, ensuring it doesn't disrupt existing data or interfere with other code cells.\n
  - A plot returned by the code cell occupies just one cell, the plot overlay is larger but the code cell is always just one cell.\n
+ - Do not use conditional returns in code cells.\n
  `,
   },
   [AITool.MoveCells]: {

From 96a6c538412591123c3810de824298ef03059cf9 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 15:49:09 +0530
Subject: [PATCH 59/62] add console log for debugging autofocus on build

---
 .vscode/settings.json                                      | 3 +++
 .../src/app/ui/components/AIUserMessageForm.tsx            | 7 ++++---
 quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx  | 2 ++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7bf27363c7..d028cb7957 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -92,5 +92,8 @@
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
index 31f31c387a..e32077faaa 100644
--- a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
+++ b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
@@ -56,12 +56,13 @@ export const AIUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((props:
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   useImperativeHandle(ref, () => textareaRef.current!);
 
+  console.log('AIUserMessageForm', autoFocusRef?.current, textareaRef.current);
+
   // Focus the input when relevant & the tab comes into focus
   useEffect(() => {
+    console.log('AIUserMessageForm useEffect', autoFocusRef?.current, textareaRef.current);
     if (autoFocusRef?.current) {
-      window.requestAnimationFrame(() => {
-        textareaRef.current?.focus();
-      });
+      textareaRef.current?.focus();
     }
   }, [autoFocusRef, textareaRef]);
 
diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
index 24ef4ed3eb..36e6c8dc78 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
@@ -44,6 +44,8 @@ export const AIAnalyst = () => {
     [setPanelWidth]
   );
 
+  console.log('AIAnalyst', initialLoadRef.current, autoFocusRef.current, showAIAnalyst);
+
   if (!showAIAnalyst || presentationMode) {
     return null;
   }

From 9c152109a04aa2db15b301667f0ddc70ea56bc59 Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 16:17:41 +0530
Subject: [PATCH 60/62] fix autofocus

---
 quadratic-client/src/app/ui/components/AIUserMessageForm.tsx | 3 ---
 quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx    | 4 +---
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
index e32077faaa..9df4541dac 100644
--- a/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
+++ b/quadratic-client/src/app/ui/components/AIUserMessageForm.tsx
@@ -56,11 +56,8 @@ export const AIUserMessageForm = forwardRef<HTMLTextAreaElement, Props>((props:
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   useImperativeHandle(ref, () => textareaRef.current!);
 
-  console.log('AIUserMessageForm', autoFocusRef?.current, textareaRef.current);
-
   // Focus the input when relevant & the tab comes into focus
   useEffect(() => {
-    console.log('AIUserMessageForm useEffect', autoFocusRef?.current, textareaRef.current);
     if (autoFocusRef?.current) {
       textareaRef.current?.focus();
     }
diff --git a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
index 36e6c8dc78..668e0eb74e 100644
--- a/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
+++ b/quadratic-client/src/app/ui/menus/AIAnalyst/AIAnalyst.tsx
@@ -28,7 +28,7 @@ export const AIAnalyst = () => {
     } else {
       autoFocusRef.current = true;
     }
-  }, []);
+  }, [showAIAnalyst]);
 
   const handleResize = useCallback(
     (event: MouseEvent) => {
@@ -44,8 +44,6 @@ export const AIAnalyst = () => {
     [setPanelWidth]
   );
 
-  console.log('AIAnalyst', initialLoadRef.current, autoFocusRef.current, showAIAnalyst);
-
   if (!showAIAnalyst || presentationMode) {
     return null;
   }

From 5378d8b53e03f5e8da90f16440b11c5c5a394c1d Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Thu, 21 Nov 2024 22:02:46 +0530
Subject: [PATCH 61/62] add : adn ! to wantsCellRef

---
 .../app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts
index e850e2689a..1c631a8552 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula.ts
@@ -152,7 +152,8 @@ class InlineEditorFormula {
   wantsCellRef() {
     const lastCharacter = inlineEditorMonaco.getNonWhitespaceCharBeforeCursor();
     return (
-      !!lastCharacter && ['', ',', '+', '-', '*', '/', '%', '=', '<', '>', '&', '.', '(', '{'].includes(lastCharacter)
+      !!lastCharacter &&
+      ['', ',', '+', '-', '*', '/', '%', '=', '<', '>', '&', '.', '(', '{', ':', '!'].includes(lastCharacter)
     );
   }
 

From 614b21b542966495b6cdb638a11a632d6476f59e Mon Sep 17 00:00:00 2001
From: AyushAgrawal-A2 <ayushagl06@gmail.com>
Date: Fri, 22 Nov 2024 03:00:23 +0530
Subject: [PATCH 62/62] fix: code cell outlines

---
 .../pending_transaction.rs                    | 47 +++++++++++++++++++
 .../execution/receive_multiplayer.rs          | 45 ++++++++----------
 2 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/quadratic-core/src/controller/active_transactions/pending_transaction.rs b/quadratic-core/src/controller/active_transactions/pending_transaction.rs
index 2858c4cd74..23815bf69d 100644
--- a/quadratic-core/src/controller/active_transactions/pending_transaction.rs
+++ b/quadratic-core/src/controller/active_transactions/pending_transaction.rs
@@ -345,6 +345,53 @@ impl PendingTransaction {
             offsets_modified.insert((None, Some(row)), size.unwrap_or(0.0));
         }
     }
+
+    pub fn add_updates_from_transaction(&mut self, transaction: PendingTransaction) {
+        self.generate_thumbnail |= transaction.generate_thumbnail;
+
+        self.validations.extend(transaction.validations);
+
+        for (sheet_id, dirty_hashes) in transaction.dirty_hashes {
+            self.dirty_hashes
+                .entry(sheet_id)
+                .or_default()
+                .extend(dirty_hashes);
+        }
+
+        self.sheet_borders.extend(transaction.sheet_borders);
+
+        for (sheet_id, code_cells) in transaction.code_cells {
+            self.code_cells
+                .entry(sheet_id)
+                .or_default()
+                .extend(code_cells);
+        }
+
+        for (sheet_id, html_cells) in transaction.html_cells {
+            self.html_cells
+                .entry(sheet_id)
+                .or_default()
+                .extend(html_cells);
+        }
+
+        for (sheet_id, image_cells) in transaction.image_cells {
+            self.image_cells
+                .entry(sheet_id)
+                .or_default()
+                .extend(image_cells);
+        }
+
+        self.fill_cells.extend(transaction.fill_cells);
+
+        self.sheet_info.extend(transaction.sheet_info);
+
+        for (sheet_id, offsets_modified) in transaction.offsets_modified {
+            self.offsets_modified
+                .entry(sheet_id)
+                .or_default()
+                .extend(offsets_modified);
+        }
+    }
 }
 
 #[cfg(test)]
diff --git a/quadratic-core/src/controller/execution/receive_multiplayer.rs b/quadratic-core/src/controller/execution/receive_multiplayer.rs
index 9db0b5f43a..144b93ea3a 100644
--- a/quadratic-core/src/controller/execution/receive_multiplayer.rs
+++ b/quadratic-core/src/controller/execution/receive_multiplayer.rs
@@ -32,7 +32,7 @@ impl GridController {
     }
 
     /// Rolls back unsaved transactions to apply earlier transactions received from the server.
-    fn rollback_unsaved_transactions(&mut self) {
+    fn rollback_unsaved_transactions(&mut self, transaction: &mut PendingTransaction) {
         if self.transactions.unsaved_transactions.is_empty() {
             return;
         }
@@ -50,10 +50,11 @@ impl GridController {
         };
         self.start_transaction(&mut rollback);
         rollback.send_transaction();
+        transaction.add_updates_from_transaction(rollback);
     }
 
     /// Reapplies the rolled-back unsaved transactions after adding earlier transactions.
-    fn reapply_unsaved_transactions(&mut self) {
+    fn reapply_unsaved_transactions(&mut self, transaction: &mut PendingTransaction) {
         if self.transactions.unsaved_transactions.is_empty() {
             return;
         }
@@ -74,6 +75,7 @@ impl GridController {
         };
         self.start_transaction(&mut reapply);
         reapply.send_transaction();
+        transaction.add_updates_from_transaction(reapply);
     }
 
     /// Used by the server to apply transactions. Since the server owns the sequence_num,
@@ -123,7 +125,11 @@ impl GridController {
 
     /// Check the out_of_order_transactions to see if they are next in order. If so, we remove them from
     /// out_of_order_transactions and apply their operations.
-    fn apply_out_of_order_transactions(&mut self, mut sequence_num: u64) {
+    fn apply_out_of_order_transactions(
+        &mut self,
+        transaction: &mut PendingTransaction,
+        mut sequence_num: u64,
+    ) {
         // nothing to do here
         if self.transactions.out_of_order_transactions.is_empty() {
             self.transactions.last_sequence_num = sequence_num;
@@ -154,7 +160,7 @@ impl GridController {
         };
         self.start_transaction(&mut out_of_order_transaction);
         out_of_order_transaction.send_transaction();
-
+        transaction.add_updates_from_transaction(out_of_order_transaction);
         self.transactions.last_sequence_num = sequence_num;
     }
 
@@ -176,23 +182,23 @@ impl GridController {
                 if index == 0 {
                     self.transactions.unsaved_transactions.remove(index);
                     self.mark_transaction_sent(transaction.id);
-                    self.apply_out_of_order_transactions(sequence_num);
+                    self.apply_out_of_order_transactions(transaction, sequence_num);
                 }
                 // otherwise we need to rollback all transaction and properly apply it
                 else {
-                    self.rollback_unsaved_transactions();
+                    self.rollback_unsaved_transactions(transaction);
                     self.transactions.unsaved_transactions.remove(index);
                     self.mark_transaction_sent(transaction.id);
                     self.start_transaction(transaction);
-                    self.apply_out_of_order_transactions(sequence_num);
-                    self.reapply_unsaved_transactions();
+                    self.apply_out_of_order_transactions(transaction, sequence_num);
+                    self.reapply_unsaved_transactions(transaction);
                 }
             } else {
                 // If the transaction is not one of ours, then we just apply the transaction after rolling back any unsaved transactions
-                self.rollback_unsaved_transactions();
+                self.rollback_unsaved_transactions(transaction);
                 self.start_transaction(transaction);
-                self.apply_out_of_order_transactions(sequence_num);
-                self.reapply_unsaved_transactions();
+                self.apply_out_of_order_transactions(transaction, sequence_num);
+                self.reapply_unsaved_transactions(transaction);
 
                 // We do not need to render a thumbnail unless we have outstanding unsaved transactions.
                 // Note: this may result in a thumbnail being unnecessarily generated by a user who's
@@ -228,7 +234,7 @@ impl GridController {
             transaction_type: TransactionType::Multiplayer,
             ..Default::default()
         };
-        self.rollback_unsaved_transactions();
+        self.rollback_unsaved_transactions(&mut results);
 
         // combine all transaction into one transaction
         transactions.into_iter().for_each(|t| {
@@ -245,25 +251,14 @@ impl GridController {
                 };
 
                 self.client_apply_transaction(&mut transaction, t.sequence_num);
-                results.generate_thumbnail |= transaction.generate_thumbnail;
-                results.validations.extend(transaction.validations);
-                results.dirty_hashes.extend(transaction.dirty_hashes);
-                results.sheet_borders.extend(transaction.sheet_borders);
-                results.code_cells.extend(transaction.code_cells);
-                results.html_cells.extend(transaction.html_cells);
-                results.image_cells.extend(transaction.image_cells);
-                results.fill_cells.extend(transaction.fill_cells);
-                results.sheet_info.extend(transaction.sheet_info);
-                results
-                    .offsets_modified
-                    .extend(transaction.offsets_modified);
+                results.add_updates_from_transaction(transaction);
             } else {
                 dbgjs!(
                     "Unable to decompress and deserialize operations in received_transactions()"
                 );
             }
         });
-        self.reapply_unsaved_transactions();
+        self.reapply_unsaved_transactions(&mut results);
         self.finalize_transaction(results);
     }