(core) Formula UI redesign

Summary:
Redesigning column type section to make it more user-friendly. Introducing column behavior concept.
Column can be either:
- Empty Formula Column: initial state (user can convert to Formula/Data Column)
- Data Column: non formula column with or without trigger (with option to add trigger, or convert to formula)
- Formula Column: pure formula column, with an option to convert to data column with a trigger.

Test Plan: Existing tests.

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D3092

app/client/ui/RightPanel.ts

@@ -230,11 +230,19 @@ export class RightPanel extends Disposable {
   }
 
   // Helper to activate the side-pane formula editor over the given HTML element.
-  private _activateFormulaEditor(refElem: Element) {
+  private _activateFormulaEditor(
+    // Element to attach to.
+    refElem: Element,
+    // Simulate user typing on the cell - open editor with an initial value.
+    editValue?: string,
+    // Custom save handler.
+    onSave?: (formula: string) => Promise<void>,
+    // Custom cancel handler.
+    onCancel?: () => void,) {
     const vsi = this._gristDoc.viewModel.activeSection().viewInstance();
     if (!vsi) { return; }
     const editRowModel = vsi.moveEditRowToCursor();
-    vsi.activeFieldBuilder.peek().openSideFormulaEditor(editRowModel, refElem);
+    return vsi.activeFieldBuilder.peek().openSideFormulaEditor(editRowModel, refElem, editValue, onSave, onCancel);
   }
 
   private _buildPageWidgetContent(_owner: MultiHolder) {
@@ -657,6 +665,10 @@ export const cssSeparator = styled('div', `
   margin-top: 16px;
 `);
 
+export const cssEmptySeparator = styled('div', `
+  margin-top: 16px;
+`);
+
 const cssConfigContainer = styled('div', `
   overflow: auto;
   --color-list-item: none;