From c44859154608c8fce68f0b50459bca879dcffcfb Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Mon, 6 Jun 2022 12:21:38 +1000
Subject: [PATCH] enable all fields in side drawer

---
 package.json                                  |   6 +-
 src/atoms/tableScope/rowActions.ts            |  22 +-
 src/components/CodeEditor/CodeEditor.tsx      |  19 +-
 .../CodeEditor/useMonacoCustomizations.ts     |   2 +-
 src/components/ErrorFallback.tsx              |  13 +-
 src/components/RichTextEditor.tsx             | 138 ++++++------
 src/components/SideDrawer/FieldWrapper.tsx    |  52 ++++-
 src/components/SideDrawer/MemoizedField.tsx   | 107 +++++++++
 src/components/SideDrawer/SaveState.tsx       |  74 ++++++
 src/components/SideDrawer/SideDrawer.tsx      |  29 ++-
 .../SideDrawer/SideDrawerFields.tsx           | 114 ++++++----
 src/components/SideDrawer/StyledDrawer.ts     |   7 +
 src/components/SideDrawer/utils.ts            |  23 +-
 src/components/Table/TableContainer.tsx       |   8 +-
 .../Table/editors/withSideDrawerEditor.tsx    |  13 +-
 .../Table/formatters/FinalColumn.tsx          |   2 +-
 src/components/TableSettingsDialog/form.tsx   |  34 ++-
 src/components/TableToolbar/HiddenFields.tsx  |   6 +
 .../fields/Action/SideDrawerField.tsx         | 119 +++++-----
 .../fields/Checkbox/SideDrawerField.tsx       |  78 +++----
 .../fields/Code/SideDrawerField.tsx           |  47 ++--
 src/components/fields/Color/PopoverCell.tsx   |  26 ++-
 .../fields/Color/SideDrawerField.tsx          | 144 ++++++------
 .../fields/ConnectService/SideDrawerField.tsx | 101 ++++-----
 .../fields/ConnectTable/SideDrawerField.tsx   | 134 ++++++-----
 .../fields/Connector/SideDrawerField.tsx      | 110 +++++----
 .../fields/CreatedAt/SideDrawerField.tsx      |  15 +-
 src/components/fields/CreatedAt/TableCell.tsx |  11 +-
 .../fields/CreatedBy/SideDrawerField.tsx      |  12 +-
 src/components/fields/CreatedBy/TableCell.tsx |   7 +-
 .../fields/Date/SideDrawerField.tsx           | 102 ++++-----
 src/components/fields/Date/utils.ts           |   2 +-
 .../fields/DateTime/SideDrawerField.tsx       | 104 ++++-----
 src/components/fields/DateTime/TableCell.tsx  |   2 +-
 .../fields/Duration/SideDrawerField.tsx       | 136 +++++++++--
 src/components/fields/Duration/index.tsx      |   4 +-
 .../fields/Email/SideDrawerField.tsx          |  42 ++--
 .../fields/File/SideDrawerField.tsx           |  61 ++---
 src/components/fields/Id/SideDrawerField.tsx  |   4 +-
 .../fields/Image/SideDrawerField.tsx          |  65 ++----
 .../fields/Json/SideDrawerField.tsx           | 213 ++++++++++--------
 .../fields/LongText/SideDrawerField.tsx       |  42 ++--
 .../fields/MultiSelect/PopoverCell.tsx        |   4 +-
 .../fields/MultiSelect/SideDrawerField.tsx    |  95 ++++----
 .../fields/Number/SideDrawerField.tsx         |  36 ++-
 .../fields/Percentage/SideDrawerField.tsx     |  79 ++++---
 .../fields/Phone/SideDrawerField.tsx          |  44 ++--
 src/components/fields/Rating/Settings.tsx     |   4 +-
 .../fields/Rating/SideDrawerField.tsx         |  56 ++---
 src/components/fields/Reference/BasicCell.tsx |  40 +++-
 .../fields/Reference/EditorCell.tsx           |  13 +-
 .../fields/Reference/SideDrawerField.tsx      |  57 ++++-
 .../fields/RichText/SideDrawerField.tsx       |  23 +-
 .../fields/ShortText/SideDrawerField.tsx      |  38 ++--
 .../fields/SingleSelect/SideDrawerField.tsx   |  41 ++--
 .../fields/Slider/SideDrawerField.tsx         |  93 ++++----
 .../fields/Status/SideDrawerField.tsx         |  43 ++--
 .../fields/SubTable/SideDrawerField.tsx       |  32 ++-
 .../fields/UpdatedAt/SideDrawerField.tsx      |  15 +-
 src/components/fields/UpdatedAt/TableCell.tsx |  11 +-
 .../fields/UpdatedBy/SideDrawerField.tsx      |  11 +-
 src/components/fields/UpdatedBy/TableCell.tsx |   7 +-
 src/components/fields/Url/SideDrawerField.tsx |  76 +++----
 src/components/fields/Url/TableCell.tsx       |   1 +
 .../fields/User/SideDrawerField.tsx           |  87 ++++---
 .../BasicCellContextMenuActions.tsx           |   2 +-
 src/components/fields/types.ts                |  24 +-
 src/hooks/useFirebaseStorageUploader.tsx      |   2 +-
 src/index.tsx                                 |  10 +-
 src/theme/components.tsx                      |   4 +
 yarn.lock                                     | 109 +++++----
 71 files changed, 1851 insertions(+), 1456 deletions(-)
 create mode 100644 src/components/SideDrawer/MemoizedField.tsx
 create mode 100644 src/components/SideDrawer/SaveState.tsx

diff --git a/package.json b/package.json
index 1d8b64c0..a422b64a 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
     "@emotion/styled": "^11.8.1",
     "@mdi/js": "^6.6.96",
     "@monaco-editor/react": "^4.4.4",
-    "@mui/icons-material": "^5.6.0",
+    "@mui/icons-material": "^5.8.2",
     "@mui/lab": "^5.0.0-alpha.76",
-    "@mui/material": "^5.6.0",
-    "@mui/styles": "^5.6.2",
+    "@mui/material": "^5.8.2",
+    "@mui/styles": "^5.8.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.4",
     "@rowy/form-builder": "^0.6.1",
     "@rowy/multiselect": "^0.4.0",
diff --git a/src/atoms/tableScope/rowActions.ts b/src/atoms/tableScope/rowActions.ts
index 3cb88605..9d197b17 100644
--- a/src/atoms/tableScope/rowActions.ts
+++ b/src/atoms/tableScope/rowActions.ts
@@ -1,5 +1,12 @@
 import { atom } from "jotai";
-import { cloneDeep, find, set as _set, unset } from "lodash-es";
+import {
+  cloneDeep,
+  find,
+  get as _get,
+  set as _set,
+  isEqual,
+  unset,
+} from "lodash-es";
 
 import { currentUserAtom } from "@src/atoms/globalScope";
 import {
@@ -211,6 +218,8 @@ export interface IUpdateFieldOptions {
   deleteField?: boolean;
   /** If true, ignores checking required fields have values */
   ignoreRequiredFields?: boolean;
+  /** Optionally, disable checking if the updated value is equal to the current value. By default, we skip the update if they’re equal. */
+  disableCheckEquality?: boolean;
 }
 /**
  * Updates or deletes a field in a row.
@@ -235,6 +244,7 @@ export const updateFieldAtom = atom(
       value,
       deleteField,
       ignoreRequiredFields,
+      disableCheckEquality,
     }: IUpdateFieldOptions
   ) => {
     const updateRowDb = get(_updateRowDbAtom);
@@ -271,7 +281,15 @@ export const updateFieldAtom = atom(
       : requiredFields.filter((field) => row[field] === undefined);
 
     // Apply field update
-    if (!deleteField) _set(update, fieldName, value);
+    if (!deleteField) {
+      // Check for equality. If updated value is same as current, skip update
+      if (!disableCheckEquality) {
+        const currentValue = _get(row, fieldName);
+        if (isEqual(currentValue, value)) return;
+      }
+      // Otherwise, apply the update
+      _set(update, fieldName, value);
+    }
 
     // Update rowsLocal if any required fields are missing
     if (missingRequiredFields.length > 0) {
diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
index 2914bef5..39e05c57 100644
--- a/src/components/CodeEditor/CodeEditor.tsx
+++ b/src/components/CodeEditor/CodeEditor.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import Editor, { EditorProps } from "@monaco-editor/react";
 import type { editor } from "monaco-editor/esm/vs/editor/editor.api";
 
-import { useTheme, Box, BoxProps } from "@mui/material";
+import { useTheme, Box, BoxProps, AppBar, Toolbar } from "@mui/material";
 import TrapFocus from "@mui/material/Unstable_TrapFocus";
 import CircularProgressOptical from "@src/components/CircularProgressOptical";
 import { ResizeBottomRight } from "@src/assets/icons";
@@ -17,12 +17,15 @@ export interface ICodeEditorProps
     Omit<IUseMonacoCustomizationsProps, "fullScreen"> {
   value: string;
   containerProps?: Partial<BoxProps>;
+  fullScreenTitle?: React.ReactNode;
 
   onValidate?: EditorProps["onValidate"];
   onValidStatusUpdate?: (result: {
     isValid: boolean;
     markers: editor.IMarker[];
   }) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 export default function CodeEditor({
@@ -31,9 +34,12 @@ export default function CodeEditor({
   disabled,
   error,
   containerProps,
+  fullScreenTitle,
 
   onValidate,
   onValidStatusUpdate,
+  onFocus,
+  onBlur,
 
   extraLibs,
   diagnosticsOptions,
@@ -76,11 +82,22 @@ export default function CodeEditor({
         ]}
         style={fullScreen ? { height: "100%" } : {}}
       >
+        {fullScreen && fullScreenTitle && (
+          <AppBar position="static" color="inherit">
+            <Toolbar variant="dense" sx={{ gap: 2 }}>
+              {fullScreenTitle}
+            </Toolbar>
+          </AppBar>
+        )}
         <Editor
           defaultLanguage={defaultLanguage}
           value={initialEditorValue}
           loading={<CircularProgressOptical size={20} sx={{ m: 2 }} />}
           className="editor"
+          onMount={(editor) => {
+            if (onFocus) editor.onDidFocusEditorWidget(onFocus);
+            if (onBlur) editor.onDidBlurEditorWidget(onBlur);
+          }}
           {...props}
           onValidate={onValidate_}
           options={{
diff --git a/src/components/CodeEditor/useMonacoCustomizations.ts b/src/components/CodeEditor/useMonacoCustomizations.ts
index aae7fa9c..8c83558a 100644
--- a/src/components/CodeEditor/useMonacoCustomizations.ts
+++ b/src/components/CodeEditor/useMonacoCustomizations.ts
@@ -314,7 +314,7 @@ export default function useMonacoCustomizations({
       left: 0,
       right: 0,
       bottom: 0,
-      zIndex: theme.zIndex.tooltip + 1,
+      zIndex: theme.zIndex.tooltip * 2,
       m: "0 !important",
       resize: "none",
       backgroundColor: theme.palette.background.paper,
diff --git a/src/components/ErrorFallback.tsx b/src/components/ErrorFallback.tsx
index 40494a0b..d477f4fb 100644
--- a/src/components/ErrorFallback.tsx
+++ b/src/components/ErrorFallback.tsx
@@ -42,6 +42,7 @@ export default function ErrorFallback({
           {error.message}
         </span>
         <Button
+          size={props.basic ? "small" : "medium"}
           href={meta.repository.url.replace(".git", "") + "/issues/new/choose"}
           target="_blank"
           rel="noopener noreferrer"
@@ -60,6 +61,7 @@ export default function ErrorFallback({
         <>
           <span>Make sure you have the right ID</span>
           <Button
+            size={props.basic ? "small" : "medium"}
             variant="outlined"
             color="secondary"
             component={Link}
@@ -82,6 +84,7 @@ export default function ErrorFallback({
         <>
           <span>Reload this page to get the latest update</span>
           <Button
+            size={props.basic ? "small" : "medium"}
             variant="outlined"
             color="secondary"
             startIcon={<ReloadIcon />}
@@ -98,5 +101,13 @@ export default function ErrorFallback({
 }
 
 export function InlineErrorFallback(props: IErrorFallbackProps) {
-  return <ErrorFallback {...props} fullScreen={false} basic wrap="nowrap" />;
+  return (
+    <ErrorFallback
+      {...props}
+      fullScreen={false}
+      basic
+      wrap="nowrap"
+      sx={{ typography: "body2" }}
+    />
+  );
 }
diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
index 15fc191b..8a518620 100644
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -27,80 +27,82 @@ import "tinymce/plugins/paste";
 import "tinymce/plugins/help";
 import "tinymce/plugins/code";
 
-const Styles = styled("div")<{ focus?: boolean; disabled?: boolean }>(
-  ({ theme, focus, disabled }) => ({
-    "& .tox": {
-      "&.tox-tinymce": {
-        borderRadius: theme.shape.borderRadius,
-        border: "none",
+const Styles = styled("div", {
+  shouldForwardProp: (prop) => prop !== "focus",
+})<{ focus?: boolean; disabled?: boolean }>(({ theme, focus, disabled }) => ({
+  "& .tox": {
+    "&.tox-tinymce": {
+      borderRadius: theme.shape.borderRadius,
+      border: "none",
 
-        backgroundColor: theme.palette.action.input,
-        boxShadow: `0 -1px 0 0 ${theme.palette.text.disabled} inset,
+      backgroundColor: theme.palette.action.input,
+      boxShadow: `0 -1px 0 0 ${theme.palette.text.disabled} inset,
                   0 0 0 1px ${theme.palette.action.inputOutline} inset`,
-        transition: theme.transitions.create("box-shadow", {
-          duration: theme.transitions.duration.short,
-        }),
+      transition: theme.transitions.create("box-shadow", {
+        duration: theme.transitions.duration.short,
+      }),
 
-        "&:hover": {
-          boxShadow: `0 -1px 0 0 ${theme.palette.text.primary} inset,
+      "&:hover": {
+        boxShadow: `0 -1px 0 0 ${theme.palette.text.primary} inset,
                     0 0 0 1px ${theme.palette.action.inputOutline} inset`,
-        },
       },
-
-      "& .tox-toolbar-overlord, & .tox-edit-area__iframe, & .tox-toolbar__primary":
-        {
-          background: "transparent",
-          borderRadius: theme.shape.borderRadius,
-        },
-      "& .tox-edit-area__iframe": { colorScheme: "auto" },
-
-      "& .tox-toolbar__group": { border: "none !important" },
-
-      "& .tox-tbtn": {
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.text.secondary,
-        cursor: "pointer",
-        margin: 0,
-
-        transition: theme.transitions.create(["color", "background-color"], {
-          duration: theme.transitions.duration.shortest,
-        }),
-
-        "&:hover": {
-          color: theme.palette.text.primary,
-          backgroundColor: "transparent",
-        },
-
-        "& svg": { fill: "currentColor" },
-      },
-
-      "& .tox-tbtn--enabled, & .tox-tbtn--enabled:hover": {
-        backgroundColor: theme.palette.action.selected + " !important",
-        color: theme.palette.text.primary,
-      },
-
-      "& .tox.tox-tinymce, & .tox.tox-tinymce:hover": disabled
-        ? {
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? "transparent"
-                : theme.palette.action.disabledBackground,
-          }
-        : focus
-        ? {
-            boxShadow: `0 -2px 0 0 ${theme.palette.primary.main} inset,
-                  0 0 0 1px ${theme.palette.action.inputOutline} inset`,
-          }
-        : {},
     },
-  })
-);
+
+    "& .tox-toolbar-overlord, & .tox-edit-area__iframe, & .tox-toolbar__primary":
+      {
+        background: "transparent",
+        borderRadius: theme.shape.borderRadius,
+      },
+    "& .tox-edit-area__iframe": { colorScheme: "auto" },
+
+    "& .tox-toolbar__group": { border: "none !important" },
+
+    "& .tox-tbtn": {
+      borderRadius: theme.shape.borderRadius,
+      color: theme.palette.text.secondary,
+      cursor: "pointer",
+      margin: 0,
+
+      transition: theme.transitions.create(["color", "background-color"], {
+        duration: theme.transitions.duration.shortest,
+      }),
+
+      "&:hover": {
+        color: theme.palette.text.primary,
+        backgroundColor: "transparent",
+      },
+
+      "& svg": { fill: "currentColor" },
+    },
+
+    "& .tox-tbtn--enabled, & .tox-tbtn--enabled:hover": {
+      backgroundColor: theme.palette.action.selected + " !important",
+      color: theme.palette.text.primary,
+    },
+
+    "& .tox.tox-tinymce, & .tox.tox-tinymce:hover": disabled
+      ? {
+          backgroundColor:
+            theme.palette.mode === "dark"
+              ? "transparent"
+              : theme.palette.action.disabledBackground,
+        }
+      : focus
+      ? {
+          boxShadow: `0 -2px 0 0 ${theme.palette.primary.main} inset,
+                  0 0 0 1px ${theme.palette.action.inputOutline} inset`,
+        }
+      : {},
+  },
+}));
 
 export interface IRichTextEditorProps {
   value?: string;
   onChange: (value: string) => void;
   disabled?: boolean;
   id: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 export default function RichTextEditor({
@@ -108,6 +110,8 @@ export default function RichTextEditor({
   onChange,
   disabled,
   id,
+  onFocus,
+  onBlur,
 }: IRichTextEditorProps) {
   const theme = useTheme();
   const [focus, setFocus] = useState(false);
@@ -152,8 +156,14 @@ export default function RichTextEditor({
         }}
         value={value}
         onEditorChange={onChange}
-        onFocus={() => setFocus(true)}
-        onBlur={() => setFocus(false)}
+        onFocus={() => {
+          setFocus(true);
+          if (onFocus) onFocus();
+        }}
+        onBlur={() => {
+          setFocus(false);
+          if (onBlur) onBlur();
+        }}
       />
     </Styles>
   );
diff --git a/src/components/SideDrawer/FieldWrapper.tsx b/src/components/SideDrawer/FieldWrapper.tsx
index e27f6c35..0b6edaa2 100644
--- a/src/components/SideDrawer/FieldWrapper.tsx
+++ b/src/components/SideDrawer/FieldWrapper.tsx
@@ -2,42 +2,60 @@ import { Suspense } from "react";
 import { useAtom } from "jotai";
 import { ErrorBoundary } from "react-error-boundary";
 
-import { Stack, InputLabel, Typography, IconButton } from "@mui/material";
+import {
+  Stack,
+  InputLabel,
+  Tooltip,
+  Typography,
+  IconButton,
+} from "@mui/material";
 import { DocumentPath as DocumentPathIcon } from "@src/assets/icons";
 import LaunchIcon from "@mui/icons-material/Launch";
 import LockIcon from "@mui/icons-material/LockOutlined";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
 
 import { InlineErrorFallback } from "@src/components/ErrorFallback";
 import FieldSkeleton from "./FieldSkeleton";
 
-import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
+import {
+  globalScope,
+  projectIdAtom,
+  altPressAtom,
+} from "@src/atoms/globalScope";
 import { FieldType } from "@src/constants/fields";
 import { getFieldProp } from "@src/components/fields";
+import { getLabelId, getFieldId } from "./utils";
 
 export interface IFieldWrapperProps {
   children?: React.ReactNode;
   type: FieldType | "debug";
-  name?: string;
+  fieldName?: string;
   label?: React.ReactNode;
   debugText?: React.ReactNode;
   disabled?: boolean;
+  hidden?: boolean;
+  index?: number;
 }
 
 export default function FieldWrapper({
   children,
   type,
-  name,
+  fieldName,
   label,
   debugText,
   disabled,
+  hidden,
+  index,
 }: IFieldWrapperProps) {
   const [projectId] = useAtom(projectIdAtom, globalScope);
+  const [altPress] = useAtom(altPressAtom, globalScope);
 
   return (
     <div>
       <Stack
         direction="row"
         alignItems="center"
+        spacing={1}
         sx={{
           color: "text.primary",
           height: 24,
@@ -51,13 +69,29 @@ export default function FieldWrapper({
       >
         {type === "debug" ? <DocumentPathIcon /> : getFieldProp("icon", type)}
         <InputLabel
-          id={`sidedrawer-label-${name}`}
-          htmlFor={`sidedrawer-field-${name}`}
-          sx={{ flexGrow: 1, lineHeight: "18px", ml: 0.75 }}
+          id={getLabelId(fieldName!)}
+          htmlFor={getFieldId(fieldName!)}
+          sx={{ flexGrow: 1, lineHeight: "18px" }}
         >
-          {label}
+          {altPress ? <code>{fieldName}</code> : label}
         </InputLabel>
-        {disabled && <LockIcon />}
+
+        {hidden && (
+          <Tooltip title="Hidden in your table view">
+            <VisibilityOffIcon />
+          </Tooltip>
+        )}
+        {disabled && (
+          <Tooltip title="Locked by ADMIN">
+            <LockIcon />
+          </Tooltip>
+        )}
+
+        {altPress && (
+          <Typography variant="caption" color="text.disabled">
+            {index}
+          </Typography>
+        )}
       </Stack>
 
       <ErrorBoundary FallbackComponent={InlineErrorFallback}>
diff --git a/src/components/SideDrawer/MemoizedField.tsx b/src/components/SideDrawer/MemoizedField.tsx
new file mode 100644
index 00000000..8333631e
--- /dev/null
+++ b/src/components/SideDrawer/MemoizedField.tsx
@@ -0,0 +1,107 @@
+import { memo, useEffect, useCallback, createElement } from "react";
+import useStateRef from "react-usestateref";
+import { isEqual, isEmpty } from "lodash-es";
+
+import FieldWrapper from "./FieldWrapper";
+import { IFieldConfig } from "@src/components/fields/types";
+import { getFieldProp } from "@src/components/fields";
+import { ColumnConfig, TableRowRef } from "@src/types/table";
+
+export interface IMemoizedFieldProps {
+  field: ColumnConfig;
+  disabled: boolean;
+  hidden: boolean;
+  value: any;
+  _rowy_ref: TableRowRef;
+  isDirty: boolean;
+  onDirty: (fieldName: string) => void;
+  onSubmit: (fieldName: string, value: any) => void;
+}
+
+export const MemoizedField = memo(
+  function MemoizedField({
+    field,
+    disabled,
+    hidden,
+    value,
+    _rowy_ref,
+    isDirty,
+    onDirty,
+    onSubmit,
+    ...props
+  }: IMemoizedFieldProps) {
+    const [localValue, setLocalValue, localValueRef] = useStateRef(value);
+    // Sync local value with document value if not dirty
+    useEffect(() => {
+      if (!isDirty) setLocalValue(value);
+    }, [isDirty, setLocalValue, value]);
+
+    const handleSubmit = useCallback(() => {
+      onSubmit(field.fieldName, localValueRef.current);
+    }, [field.fieldName, localValueRef, onSubmit]);
+
+    // Derivative/aggregate field support
+    let type = field.type;
+    if (field.config && field.config.renderFieldType) {
+      type = field.config.renderFieldType;
+    }
+
+    const fieldComponent: IFieldConfig["SideDrawerField"] = getFieldProp(
+      "SideDrawerField",
+      type
+    );
+
+    // Should not reach this state
+    if (isEmpty(fieldComponent)) {
+      // console.error('Could not find SideDrawerField component', field);
+      return null;
+    }
+
+    return (
+      <FieldWrapper
+        type={field.type}
+        fieldName={field.fieldName}
+        label={field.name}
+        disabled={disabled}
+        hidden={hidden}
+        index={field.index}
+        {...props}
+      >
+        {createElement(fieldComponent, {
+          column: field as any,
+          _rowy_ref,
+          value: localValue,
+          onDirty: () => onDirty(field.key),
+          onChange: (value: any) => {
+            setLocalValue(value);
+            onDirty(field.key);
+          },
+          onSubmit: handleSubmit,
+          disabled,
+          // TODO: Remove
+          control: {} as any,
+          useFormMethods: {} as any,
+          docRef: _rowy_ref,
+        })}
+      </FieldWrapper>
+    );
+  },
+  (prev, next) => {
+    // If hidden or disabled change, re-render
+    if (prev.hidden !== next.hidden || prev.disabled !== next.disabled) {
+      return false;
+    }
+
+    // Re-render if column config changes
+    if (!isEqual(prev.field, next.field)) return false;
+
+    // If dirty, don’t re-render. This has the effect of the field only
+    // being re-rendered if it’s not dirty.
+    if (prev.isDirty || next.isDirty) return true;
+
+    // Don’t render if values are deep equal
+    return isEqual(prev.value, next.value);
+  }
+);
+
+export default MemoizedField;
diff --git a/src/components/SideDrawer/SaveState.tsx b/src/components/SideDrawer/SaveState.tsx
new file mode 100644
index 00000000..720c9552
--- /dev/null
+++ b/src/components/SideDrawer/SaveState.tsx
@@ -0,0 +1,74 @@
+import { useState, useEffect } from "react";
+
+import { darken, lighten } from "@mui/system";
+import { alpha, Fade, Paper, Chip } from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+
+export type SaveStates = "" | "unsaved" | "saving" | "saved";
+export interface ISaveStateProps {
+  state: SaveStates;
+}
+
+export default function SaveState({ state }: ISaveStateProps) {
+  const [showHelpMessage, setShowHelpMessage] = useState(false);
+  useEffect(() => {
+    if (state !== "unsaved") {
+      setShowHelpMessage(false);
+      return;
+    }
+
+    const timeout = setTimeout(() => setShowHelpMessage(true), 3000);
+    return () => {
+      setShowHelpMessage(false);
+      clearTimeout(timeout);
+    };
+  }, [state]);
+
+  return (
+    <Fade in={Boolean(state)}>
+      <Paper
+        elevation={6}
+        sx={[
+          {
+            position: "sticky",
+            mt: -3,
+            mb: -3,
+            top: (theme) => theme.spacing(-3),
+            right: (theme) => theme.spacing(-0.75),
+            alignSelf: "flex-end",
+
+            zIndex: "drawer",
+            borderRadius: 100,
+            width: "min-content",
+            boxShadow: 1,
+          },
+          {
+            "& .MuiChip-root": { display: "flex", minWidth: 75 },
+            "& .MuiChip-icon": { color: "inherit" },
+          },
+        ]}
+      >
+        {state === "unsaved" ? (
+          <Chip
+            label={
+              "You have unsaved changes" +
+              (showHelpMessage ? ". Click anywhere to save." : "")
+            }
+            sx={{
+              bgcolor: (theme) => alpha(theme.palette.warning.light, 0.15),
+              color: (theme) =>
+                theme.palette.mode === "dark"
+                  ? lighten(theme.palette.warning.main, 0.6)
+                  : darken(theme.palette.warning.main, 0.6),
+              transitionDuration: 0,
+            }}
+          />
+        ) : state === "saving" ? (
+          <Chip label="Saving…" />
+        ) : (
+          <Chip label="Saved" icon={<CheckIcon />} />
+        )}
+      </Paper>
+    </Fade>
+  );
+}
diff --git a/src/components/SideDrawer/SideDrawer.tsx b/src/components/SideDrawer/SideDrawer.tsx
index 817e5c5c..17580859 100644
--- a/src/components/SideDrawer/SideDrawer.tsx
+++ b/src/components/SideDrawer/SideDrawer.tsx
@@ -4,8 +4,9 @@ import { useAtom } from "jotai";
 import { find, findIndex } from "lodash-es";
 import { ErrorBoundary } from "react-error-boundary";
 import { DataGridHandle } from "react-data-grid";
+import { TransitionGroup } from "react-transition-group";
 
-import { Fab } from "@mui/material";
+import { Fab, Fade } from "@mui/material";
 import ChevronIcon from "@mui/icons-material/KeyboardArrowLeft";
 import ChevronUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
@@ -111,20 +112,22 @@ export default function SideDrawer({
     >
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <div className="sidedrawer-contents">
-          {open && cell && selectedRow && (
-            <SideDrawerFields key={cell.path} row={selectedRow} />
-          )}
+          <TransitionGroup>
+            {open && cell && selectedRow && (
+              <Fade>
+                <div>
+                  <SideDrawerFields key={cell.path} row={selectedRow} />
+                </div>
+              </Fade>
+            )}
+          </TransitionGroup>
         </div>
       </ErrorBoundary>
 
-      {open && (
+      {!!cell && (
         <div className="sidedrawer-nav-fab-container">
           <Fab
-            style={{
-              animationDelay: "0.2s",
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-            }}
+            style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
             size="small"
             disabled={disabled || !cell || selectedCellRowIndex <= 0}
             onClick={handleNavigate("up")}
@@ -133,11 +136,7 @@ export default function SideDrawer({
           </Fab>
 
           <Fab
-            style={{
-              animationDelay: "0.1s",
-              borderTopLeftRadius: 0,
-              borderTopRightRadius: 0,
-            }}
+            style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
             size="small"
             disabled={
               disabled || !cell || selectedCellRowIndex >= tableRows.length - 1
diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index 8a12c3c9..5e4f0bc9 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -1,9 +1,12 @@
-import { useEffect, createElement } from "react";
-import { useAtom } from "jotai";
-import { isEmpty, get } from "lodash-es";
+import { useEffect, useState, useCallback } from "react";
+import { useAtom, useSetAtom } from "jotai";
+import { get, isEqual } from "lodash-es";
+import { useSnackbar } from "notistack";
 
 import { Stack, FormControlLabel, Switch } from "@mui/material";
 import FieldWrapper from "./FieldWrapper";
+import MemoizedField from "./MemoizedField";
+import SaveState from "./SaveState";
 
 import {
   globalScope,
@@ -15,13 +18,12 @@ import {
   tableIdAtom,
   tableSettingsAtom,
   tableColumnsOrderedAtom,
+  updateFieldAtom,
   selectedCellAtom,
   sideDrawerShowHiddenFieldsAtom,
 } from "@src/atoms/tableScope";
 import { formatSubTableName } from "@src/utils/table";
-import { getFieldProp } from "@src/components/fields";
 import { TableRow } from "@src/types/table";
-import { IFieldConfig } from "@src/components/fields/types";
 
 export interface ISideDrawerFieldsProps {
   row: TableRow;
@@ -33,15 +35,53 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
   const [tableId] = useAtom(tableIdAtom, tableScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
+  const updateField = useSetAtom(updateFieldAtom, tableScope);
   const [selectedCell] = useAtom(selectedCellAtom, tableScope);
   const [showHiddenFields, setShowHiddenFields] = useAtom(
     sideDrawerShowHiddenFieldsAtom,
     tableScope
   );
+  const [saveState, setSaveState] = useState<
+    "" | "unsaved" | "saving" | "saved"
+  >("");
+  const [dirtyField, setDirtyField] = useState("");
+  const { enqueueSnackbar } = useSnackbar();
+
+  // Called when a field has unsaved changes
+  const onDirty = useCallback((key: string) => {
+    setSaveState("unsaved");
+    setDirtyField(key);
+  }, []);
+  // Called when an individual field is ready to be saved
+  const onSubmit = useCallback(
+    async (fieldName: string, value: any) => {
+      if (!selectedCell) return;
+
+      const currentValue = get(row, fieldName);
+      console.log("submit", fieldName, isEqual(currentValue, value), value);
+      if (isEqual(currentValue, value)) {
+        console.log("currentValue", currentValue);
+        setSaveState("");
+        setDirtyField("");
+        return;
+      }
+
+      setSaveState("saving");
+      try {
+        await updateField({ path: selectedCell!.path, fieldName, value });
+        setSaveState("saved");
+      } catch (e) {
+        enqueueSnackbar((e as Error).message, { variant: "error" });
+        setSaveState("");
+      } finally {
+        setDirtyField("");
+      }
+    },
+    [row, selectedCell, updateField, enqueueSnackbar]
+  );
 
   const userDocHiddenFields =
     userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields ?? [];
-
   const fields = showHiddenFields
     ? tableColumnsOrdered
     : tableColumnsOrdered.filter((f) => !userDocHiddenFields.includes(f.key));
@@ -67,54 +107,28 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
 
   return (
     <Stack spacing={3}>
-      {fields.map((field, i) => {
-        // Derivative/aggregate field support
-        let type = field.type;
-        if (field.config && field.config.renderFieldType) {
-          type = field.config.renderFieldType;
-        }
+      <SaveState state={saveState} />
 
-        const fieldComponent: IFieldConfig["SideDrawerField"] = getFieldProp(
-          "SideDrawerField",
-          type
-        );
-
-        // Should not reach this state
-        if (isEmpty(fieldComponent)) {
-          // console.error('Could not find SideDrawerField component', field);
-          return null;
-        }
-
-        // Disable field if locked, or if table is read-only
-        const disabled = Boolean(
-          field.editable === false ||
-            (tableSettings.readOnly && !userRoles.includes("ADMIN"))
-        );
-
-        return (
-          <FieldWrapper
-            key={field.key ?? i}
-            type={field.type}
-            name={field.key}
-            label={field.name}
-            disabled={disabled}
-          >
-            {createElement(fieldComponent, {
-              column: field as any,
-              control: {} as any,
-              docRef: row._rowy_ref,
-              disabled,
-              value: get(row, field.fieldName),
-              onSubmit: console.log,
-              useFormMethods: {} as any,
-            })}
-          </FieldWrapper>
-        );
-      })}
+      {fields.map((field, i) => (
+        <MemoizedField
+          key={field.key ?? i}
+          field={field}
+          disabled={Boolean(
+            field.editable === false ||
+              (tableSettings.readOnly && !userRoles.includes("ADMIN"))
+          )}
+          hidden={userDocHiddenFields.includes(field.key)}
+          _rowy_ref={row._rowy_ref}
+          value={get(row, field.fieldName)}
+          onDirty={onDirty}
+          onSubmit={onSubmit}
+          isDirty={dirtyField === field.key}
+        />
+      ))}
 
       <FieldWrapper
         type="debug"
-        name="_debug_path"
+        fieldName="_rowy_ref.path"
         label="Document path"
         debugText={row._rowy_ref.path ?? row._rowy_ref.id ?? "No ref"}
       />
diff --git a/src/components/SideDrawer/StyledDrawer.ts b/src/components/SideDrawer/StyledDrawer.ts
index 9e06599f..21cdba6b 100644
--- a/src/components/SideDrawer/StyledDrawer.ts
+++ b/src/components/SideDrawer/StyledDrawer.ts
@@ -84,6 +84,13 @@ export const StyledDrawer = styled(Drawer)(({ theme }) => ({
     zIndex: theme.zIndex.drawer + 1,
 
     animation: `${theme.transitions.duration.standard}ms ${theme.transitions.easing.easeInOut} both navFabSlide`,
+
+    "& .MuiFab-root.Mui-disabled": {
+      backgroundColor:
+        theme.palette.mode === "dark"
+          ? undefined
+          : theme.palette.background.paper,
+    },
   },
   "@keyframes navFabSlide": {
     from: {
diff --git a/src/components/SideDrawer/utils.ts b/src/components/SideDrawer/utils.ts
index db2deeb3..389da222 100644
--- a/src/components/SideDrawer/utils.ts
+++ b/src/components/SideDrawer/utils.ts
@@ -1,26 +1,6 @@
-// import { Control } from "react-hook-form";
 import { colord } from "colord";
 import type { SystemStyleObject, Theme } from "@mui/system";
 
-// import { FieldType } from "@src/constants/fields";
-// import { TableRowRef } from "@src/types/table";
-
-// export interface ISideDrawerFieldProps {
-//   control: Control;
-//   name: string;
-//   docRef: TableRowRef;
-//   editable?: boolean;
-// }
-
-// export type Values = Record<string, any>;
-// export type Field = {
-//   type?: FieldType;
-//   name: string;
-//   label?: string;
-//   [key: string]: any;
-// };
-// export type Fields = (Field | ((values: Values) => Field))[];
-
 export const fieldSx: SystemStyleObject<Theme> = {
   borderRadius: 1,
   py: 0.5,
@@ -54,3 +34,6 @@ export const fieldSx: SystemStyleObject<Theme> = {
   typography: "body2",
   color: "text.primary",
 };
+
+export const getLabelId = (key: string) => `sidedrawer-label-${key}`;
+export const getFieldId = (key: string) => `sidedrawer-field-${key}`;
diff --git a/src/components/Table/TableContainer.tsx b/src/components/Table/TableContainer.tsx
index 3703151c..4a6d900d 100644
--- a/src/components/Table/TableContainer.tsx
+++ b/src/components/Table/TableContainer.tsx
@@ -2,7 +2,10 @@ import { colord } from "colord";
 import { styled, alpha, darken, lighten } from "@mui/material";
 import { APP_BAR_HEIGHT } from "@src/layouts/Navigation";
 import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
-import { DRAWER_COLLAPSED_WIDTH } from "@src/components/SideDrawer";
+import {
+  DRAWER_COLLAPSED_WIDTH,
+  DRAWER_WIDTH,
+} from "@src/components/SideDrawer";
 
 export const OUT_OF_ORDER_MARGIN = 8;
 
@@ -124,7 +127,7 @@ export const TableContainer = styled("div", {
 
   ".rdg-row, .rdg-header-row": {
     marginLeft: `max(env(safe-area-inset-left), ${theme.spacing(2)})`,
-    marginRight: `max(env(safe-area-inset-right), ${theme.spacing(8)})`,
+    marginRight: `max(env(safe-area-inset-right), ${DRAWER_WIDTH}px)`,
     display: "inline-grid", // Fix Safari not showing margin-right
   },
 
@@ -244,5 +247,6 @@ export const TableContainer = styled("div", {
     },
   },
 }));
+TableContainer.displayName = "TableContainer";
 
 export default TableContainer;
diff --git a/src/components/Table/editors/withSideDrawerEditor.tsx b/src/components/Table/editors/withSideDrawerEditor.tsx
index 641a0a73..799f3cd8 100644
--- a/src/components/Table/editors/withSideDrawerEditor.tsx
+++ b/src/components/Table/editors/withSideDrawerEditor.tsx
@@ -1,7 +1,9 @@
-// import { useEffect } from "react";
+import { useEffect } from "react";
+import { useSetAtom } from "jotai";
 import { EditorProps } from "react-data-grid";
 import { get } from "lodash-es";
 
+import { tableScope, sideDrawerOpenAtom } from "@src/atoms/tableScope";
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 /**
@@ -17,12 +19,11 @@ export default function withSideDrawerEditor(
 ) {
   return function SideDrawerEditor(props: EditorProps<any, any>) {
     const { row, column } = props;
-    // FIXME: const { sideDrawerRef } = useProjectContext();
 
-    // useEffect(() => {
-    //   if (!sideDrawerRef?.current?.open && sideDrawerRef?.current?.setOpen)
-    //     sideDrawerRef?.current?.setOpen(true);
-    // }, [column]);
+    const setSideDrawerOpen = useSetAtom(sideDrawerOpenAtom, tableScope);
+    useEffect(() => {
+      setSideDrawerOpen(true);
+    }, [setSideDrawerOpen]);
 
     return HeavyCell ? (
       <div
diff --git a/src/components/Table/formatters/FinalColumn.tsx b/src/components/Table/formatters/FinalColumn.tsx
index cb48166b..b2724889 100644
--- a/src/components/Table/formatters/FinalColumn.tsx
+++ b/src/components/Table/formatters/FinalColumn.tsx
@@ -2,7 +2,7 @@ import { useAtom, useSetAtom } from "jotai";
 import type { FormatterProps } from "react-data-grid";
 
 import { Stack, Tooltip, IconButton, alpha } from "@mui/material";
-import { Copy as CopyCellsIcon } from "@src/assets/icons";
+import { CopyCells as CopyCellsIcon } from "@src/assets/icons";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 
 import {
diff --git a/src/components/TableSettingsDialog/form.tsx b/src/components/TableSettingsDialog/form.tsx
index 47e28c81..7a8ac27c 100644
--- a/src/components/TableSettingsDialog/form.tsx
+++ b/src/components/TableSettingsDialog/form.tsx
@@ -309,7 +309,22 @@ export const tableSettings = (
       label: "Created By field key (optional)",
       defaultValue: "_createdBy",
       displayCondition: "return values.audit",
-      assistiveText: "Optionally, change the field key",
+      assistiveText:
+        mode === "update" ? (
+          <>
+            You can change the field key.
+            <br />
+            <WarningIcon
+              color="warning"
+              aria-label="Warning"
+              sx={{ fontSize: 16, mr: 0.5, verticalAlign: "middle" }}
+            />
+            You’ll need to delete and re-add any Created By or Created At
+            columns.
+          </>
+        ) : (
+          "Optionally, change the field key"
+        ),
       gridCols: { xs: 12, sm: 6 },
       sx: { "& .MuiInputBase-input": { fontFamily: "mono" } },
     },
@@ -320,7 +335,22 @@ export const tableSettings = (
       label: "Updated By field key (optional)",
       defaultValue: "_updatedBy",
       displayCondition: "return values.audit",
-      assistiveText: "Optionally, change the field key",
+      assistiveText:
+        mode === "update" ? (
+          <>
+            You can change the field key.
+            <br />
+            <WarningIcon
+              color="warning"
+              aria-label="Warning"
+              sx={{ fontSize: 16, mr: 0.5, verticalAlign: "middle" }}
+            />
+            You’ll need to delete and re-add any Updated By or Updated At
+            columns.
+          </>
+        ) : (
+          "Optionally, change the field key"
+        ),
       gridCols: { xs: 12, sm: 6 },
       sx: { "& .MuiInputBase-input": { fontFamily: "mono" } },
     },
diff --git a/src/components/TableToolbar/HiddenFields.tsx b/src/components/TableToolbar/HiddenFields.tsx
index d00f88df..8bf8a864 100644
--- a/src/components/TableToolbar/HiddenFields.tsx
+++ b/src/components/TableToolbar/HiddenFields.tsx
@@ -119,6 +119,12 @@ export default function HiddenFields() {
               anchorEl: buttonRef.current,
               anchorOrigin: { vertical: "bottom", horizontal: "left" },
               transformOrigin: { vertical: "top", horizontal: "left" },
+              sx: {
+                "& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected=true]":
+                  {
+                    backgroundColor: "transparent",
+                  },
+              },
             },
           },
         }}
diff --git a/src/components/fields/Action/SideDrawerField.tsx b/src/components/fields/Action/SideDrawerField.tsx
index 6056ecb6..a13f8120 100644
--- a/src/components/fields/Action/SideDrawerField.tsx
+++ b/src/components/fields/Action/SideDrawerField.tsx
@@ -1,72 +1,79 @@
-import { Controller, useWatch } from "react-hook-form";
+import { useMemo } from "react";
+import { useAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { find, isEqual } from "lodash-es";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box, Stack, Link } from "@mui/material";
-
 import ActionFab from "./ActionFab";
-import { fieldSx } from "@src/components/SideDrawer/utils";
+
+import { tableScope, tableRowsAtom } from "@src/atoms/tableScope";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { sanitiseCallableName, isUrl } from "./utils";
 
 export default function Action({
   column,
-  control,
-  docRef,
+  _rowy_ref,
+  value,
+  onChange,
   disabled,
 }: ISideDrawerFieldProps) {
-  const row = useWatch({ control });
+  const [row] = useAtom(
+    useMemo(
+      () =>
+        selectAtom(
+          tableRowsAtom,
+          (tableRows) => find(tableRows, ["_rowy_ref.path", _rowy_ref.path]),
+          isEqual
+        ),
+      [_rowy_ref.path]
+    ),
+    tableScope
+  );
+
+  const hasRan = value && value.status;
 
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => {
-        const hasRan = value && value.status;
-
-        return (
-          <Stack
-            direction="row"
-            alignItems="center"
-            spacing={1}
-            sx={{ mr: -2 / 8 }}
+    <Stack direction="row" alignItems="center" spacing={1} sx={{ mr: -2 / 8 }}>
+      <Box
+        sx={[
+          fieldSx,
+          {
+            flexGrow: 1,
+            whiteSpace: "normal",
+            width: "100%",
+            overflow: "hidden",
+          },
+        ]}
+      >
+        {hasRan && isUrl(value.status) ? (
+          <Link
+            href={value.status}
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="body2"
+            underline="always"
           >
-            <Box
-              sx={[
-                fieldSx,
-                {
-                  flexGrow: 1,
-                  whiteSpace: "normal",
-                  width: "100%",
-                  overflow: "hidden",
-                },
-              ]}
-            >
-              {hasRan && isUrl(value.status) ? (
-                <Link
-                  href={value.status}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  variant="body2"
-                  underline="always"
-                >
-                  {value.status}
-                </Link>
-              ) : hasRan ? (
-                value.status
-              ) : (
-                sanitiseCallableName(column.key)
-              )}
-            </Box>
+            {value.status}
+          </Link>
+        ) : hasRan ? (
+          value.status
+        ) : (
+          sanitiseCallableName(column.key)
+        )}
+      </Box>
 
-            <ActionFab
-              row={{ ...row, ref: docRef }}
-              column={{ config: column.config, key: column.key }}
-              onSubmit={onChange}
-              value={value}
-              disabled={disabled}
-            />
-          </Stack>
-        );
-      }}
-    />
+      <ActionFab
+        row={row}
+        column={column}
+        onSubmit={(value) => {
+          onChange(value);
+          onSubmit();
+        }}
+        value={value}
+        disabled={disabled}
+        id={getFieldId(column.key)}
+      />
+    </Stack>
   );
 }
diff --git a/src/components/fields/Checkbox/SideDrawerField.tsx b/src/components/fields/Checkbox/SideDrawerField.tsx
index b3942ee9..7f218351 100644
--- a/src/components/fields/Checkbox/SideDrawerField.tsx
+++ b/src/components/fields/Checkbox/SideDrawerField.tsx
@@ -1,58 +1,48 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { ButtonBase, FormControlLabel, Switch } from "@mui/material";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Checkbox({
   column,
-  control,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-          onChange(event.target.checked);
-        };
+    <ButtonBase sx={fieldSx} disabled={disabled}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={value}
+            onChange={(e) => onChange(e.target.checked)}
+            onBlur={onSubmit}
+            disabled={disabled}
+            color="success"
+            id={getFieldId(column.key)}
+          />
+        }
+        label={column.name as string}
+        labelPlacement="start"
+        sx={{
+          mx: 0,
+          my: -0.25,
+          width: "100%",
+          alignItems: "center",
 
-        return (
-          <ButtonBase sx={fieldSx} disabled={disabled}>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={value}
-                  onChange={handleChange}
-                  onBlur={onBlur}
-                  disabled={disabled}
-                  color="success"
-                />
-              }
-              label={column.name as string}
-              labelPlacement="start"
-              sx={{
-                mx: 0,
-                my: -0.25,
-                width: "100%",
-                alignItems: "center",
+          "& .MuiFormControlLabel-label": {
+            font: "inherit",
+            letterSpacing: "inherit",
+            flexGrow: 1,
+            overflowX: "hidden",
+            mt: 0,
+          },
 
-                "& .MuiFormControlLabel-label": {
-                  font: "inherit",
-                  letterSpacing: "inherit",
-                  flexGrow: 1,
-                  overflowX: "hidden",
-                  mt: 0,
-                },
-
-                "& .MuiSwitch-root": { mr: -1.25 },
-              }}
-            />
-          </ButtonBase>
-        );
-      }}
-    />
+          "& .MuiSwitch-root": { mr: -1.25 },
+        }}
+      />
+    </ButtonBase>
   );
 }
diff --git a/src/components/fields/Code/SideDrawerField.tsx b/src/components/fields/Code/SideDrawerField.tsx
index 078a4de8..373a1de5 100644
--- a/src/components/fields/Code/SideDrawerField.tsx
+++ b/src/components/fields/Code/SideDrawerField.tsx
@@ -1,25 +1,46 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
+import { Typography, Tooltip } from "@mui/material";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
+import LockIcon from "@mui/icons-material/LockOutlined";
+
 import CodeEditor from "@src/components/CodeEditor";
+import config from ".";
 
 export default function Code({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => (
-        <CodeEditor
-          defaultLanguage={column.config?.language}
-          disabled={disabled}
-          value={value}
-          onChange={onChange}
-        />
-      )}
+    <CodeEditor
+      defaultLanguage={column.config?.language}
+      disabled={disabled}
+      value={value}
+      onChange={onChange}
+      onBlur={onSubmit}
+      fullScreenTitle={
+        <>
+          {config.icon}
+
+          <Typography variant="h6" component="div" style={{ flexGrow: 1 }}>
+            {column.name}
+          </Typography>
+
+          {column.hidden && (
+            <Tooltip title="Hidden in your table view">
+              <VisibilityOffIcon color="action" />
+            </Tooltip>
+          )}
+          {disabled && (
+            <Tooltip title="Locked by ADMIN">
+              <LockIcon color="action" />
+            </Tooltip>
+          )}
+        </>
+      }
     />
   );
 }
diff --git a/src/components/fields/Color/PopoverCell.tsx b/src/components/fields/Color/PopoverCell.tsx
index 84832e72..cfdbb219 100644
--- a/src/components/fields/Color/PopoverCell.tsx
+++ b/src/components/fields/Color/PopoverCell.tsx
@@ -1,8 +1,10 @@
-import { IPopoverCellProps } from "@src/components/fields/types";
-import { ColorPicker, toColor } from "react-color-palette";
-import { useDebouncedCallback } from "use-debounce";
-import "react-color-palette/lib/css/styles.css";
 import { useEffect, useState } from "react";
+import { IPopoverCellProps } from "@src/components/fields/types";
+import { useDebouncedCallback } from "use-debounce";
+import { ColorPicker, toColor } from "react-color-palette";
+import "react-color-palette/lib/css/styles.css";
+
+import { Box } from "@mui/material";
 
 export default function Color({ value, onSubmit }: IPopoverCellProps) {
   const [localValue, setLocalValue] = useState(value);
@@ -15,12 +17,14 @@ export default function Color({ value, onSubmit }: IPopoverCellProps) {
   }, [localValue]);
 
   return (
-    <ColorPicker
-      width={240}
-      height={180}
-      color={localValue?.hex ? localValue : toColor("hex", "#fff")}
-      onChange={setLocalValue}
-      alpha
-    />
+    <Box sx={{ "& .rcp": { border: 0 } }}>
+      <ColorPicker
+        width={240}
+        height={180}
+        color={localValue?.hex ? localValue : toColor("hex", "#fff")}
+        onChange={setLocalValue}
+        alpha
+      />
+    </Box>
   );
 }
diff --git a/src/components/fields/Color/SideDrawerField.tsx b/src/components/fields/Color/SideDrawerField.tsx
index 72c2d784..0a250dbd 100644
--- a/src/components/fields/Color/SideDrawerField.tsx
+++ b/src/components/fields/Color/SideDrawerField.tsx
@@ -1,86 +1,98 @@
 import { useState } from "react";
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { ColorPicker, toColor } from "react-color-palette";
 import "react-color-palette/lib/css/styles.css";
 
 import { ButtonBase, Box, Collapse } from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Color({
   column,
-  control,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const [showPicker, setShowPicker] = useState(false);
   const toggleOpen = () => setShowPicker((s) => !s);
 
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        return (
-          <>
-            <ButtonBase
-              onClick={() => {
-                toggleOpen();
-                onBlur();
-              }}
-              component={ButtonBase}
-              focusRipple
-              disabled={disabled}
-              sx={[
-                fieldSx,
-                {
-                  justifyContent: "flex-start",
-                  "&&": { pl: 0.75 },
-                  color: value?.hex ? "textPrimary" : "textSecondary",
-                },
-              ]}
-            >
-              <Box
-                sx={{
-                  backgroundColor: value?.hex,
-                  width: 20,
-                  height: 20,
-                  mr: 2,
-                  boxShadow: (theme) =>
-                    `0 0 0 1px ${theme.palette.divider} inset`,
-                  borderRadius: 0.5,
-                }}
-              />
+    <>
+      <ButtonBase
+        onClick={toggleOpen}
+        component={ButtonBase}
+        focusRipple
+        disabled={disabled}
+        sx={[
+          fieldSx,
+          {
+            justifyContent: "flex-start",
+            "&&": { pl: 0.75, pr: 0.5 },
+            color: value?.hex ? "textPrimary" : "textSecondary",
+            transition: (theme) =>
+              theme.transitions.create("border-radius", {
+                delay: theme.transitions.duration.standard,
+              }),
+            "&.Mui-disabled": { color: "text.disabled" },
+          },
+          showPicker && {
+            transitionDelay: "0s",
+            transitionDuration: "0s",
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        ]}
+        aria-expanded={showPicker}
+        aria-controls={getFieldId(column.key)}
+      >
+        <Box
+          sx={{
+            backgroundColor: value?.hex,
+            width: 20,
+            height: 20,
+            mr: 1.5,
+            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
+            borderRadius: 0.5,
+          }}
+        />
 
-              {value?.hex ?? "Choose a color…"}
-            </ButtonBase>
+        <div style={{ flexGrow: 1 }}>{value?.hex ?? "Choose a color…"}</div>
 
-            <Collapse
-              in={showPicker}
-              sx={{
-                "& .rcp": {
-                  borderRadius: 1,
-                  boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider}`,
-                  m: 1 / 8,
-                },
-                "& .rcp-saturation": {
-                  borderRadius: 1,
-                  borderBottomLeftRadius: 0,
-                  borderBottomRightRadius: 0,
-                },
-              }}
-            >
-              <ColorPicker
-                width={240}
-                height={180}
-                color={value?.hex ? value : toColor("hex", "#fff")}
-                onChange={onChange}
-                alpha
-              />
-            </Collapse>
-          </>
-        );
-      }}
-    />
+        <ArrowDropDownIcon
+          color="action"
+          sx={{
+            transition: (theme) => theme.transitions.create("transform"),
+            transform: showPicker ? "rotate(180deg)" : "none",
+          }}
+        />
+      </ButtonBase>
+
+      <Collapse
+        in={showPicker}
+        sx={{
+          "& .rcp": {
+            borderTop: 0,
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0,
+            "& .rcp-saturation": {
+              borderRadius: 0,
+            },
+          },
+        }}
+        id={getFieldId(column.key)}
+        onBlur={onSubmit}
+      >
+        <ColorPicker
+          width={440}
+          height={180}
+          color={value?.hex ? value : toColor("hex", "#fff")}
+          onChange={onChange}
+          onChangeComplete={onSubmit}
+          alpha
+        />
+      </Collapse>
+    </>
   );
 }
diff --git a/src/components/fields/ConnectService/SideDrawerField.tsx b/src/components/fields/ConnectService/SideDrawerField.tsx
index 0a630ed7..6adceddb 100644
--- a/src/components/fields/ConnectService/SideDrawerField.tsx
+++ b/src/components/fields/ConnectService/SideDrawerField.tsx
@@ -1,72 +1,67 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { get } from "lodash-es";
 
 import { Grid, Chip } from "@mui/material";
 
 import ConnectServiceSelect from "./ConnectServiceSelect";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function ConnectService({
   column,
-  control,
+  _rowy_ref,
+  value,
+  onChange,
+  onSubmit,
   disabled,
-  docRef,
 }: ISideDrawerFieldProps) {
   const config = column.config ?? {};
   const displayKey = config.titleKey ?? config.primaryKey;
 
+  const handleDelete = (hit: any) => () => {
+    // if (multiple)
+    onChange(
+      value.filter(
+        (v: any) => get(v, config.primaryKey) !== get(hit, config.primaryKey)
+      )
+    );
+    onSubmit();
+    // else form.setFieldValue(field.name, []);
+  };
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        const handleDelete = (hit: any) => () => {
-          // if (multiple)
-          onChange(
-            value.filter(
-              (v: any) =>
-                get(v, config.primaryKey) !== get(hit, config.primaryKey)
-            )
-          );
-          // else form.setFieldValue(field.name, []);
-        };
+    <>
+      {!disabled && (
+        <ConnectServiceSelect
+          config={(config as any) ?? {}}
+          value={value}
+          onChange={onChange}
+          docRef={_rowy_ref as any}
+          TextFieldProps={{
+            label: "",
+            hiddenLabel: true,
+            fullWidth: true,
+            onBlur: onSubmit,
+            id: getFieldId(column.key),
+            // SelectProps: {
+            //   renderValue: () => `${value?.length ?? 0} selected`,
+            // },
+          }}
+        />
+      )}
 
-        return (
-          <>
-            {!disabled && (
-              <ConnectServiceSelect
-                config={(config as any) ?? {}}
-                value={value}
-                onChange={onChange}
-                docRef={docRef as any}
-                TextFieldProps={{
-                  label: "",
-                  hiddenLabel: true,
-                  fullWidth: true,
-                  onBlur,
-                  // SelectProps: {
-                  //   renderValue: () => `${value?.length ?? 0} selected`,
-                  // },
-                }}
+      {Array.isArray(value) && (
+        <Grid container spacing={0.5} style={{ marginTop: 2 }}>
+          {value.map((snapshot) => (
+            <Grid item key={get(snapshot, config.primaryKey)}>
+              <Chip
+                component="li"
+                label={get(snapshot, displayKey)}
+                onDelete={disabled ? undefined : handleDelete(snapshot)}
               />
-            )}
-
-            {Array.isArray(value) && (
-              <Grid container spacing={0.5} style={{ marginTop: 2 }}>
-                {value.map((snapshot) => (
-                  <Grid item key={get(snapshot, config.primaryKey)}>
-                    <Chip
-                      component="li"
-                      label={get(snapshot, displayKey)}
-                      onDelete={disabled ? undefined : handleDelete(snapshot)}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            )}
-          </>
-        );
-      }}
-    />
+            </Grid>
+          ))}
+        </Grid>
+      )}
+    </>
   );
 }
diff --git a/src/components/fields/ConnectTable/SideDrawerField.tsx b/src/components/fields/ConnectTable/SideDrawerField.tsx
index 53e69518..d4da89ff 100644
--- a/src/components/fields/ConnectTable/SideDrawerField.tsx
+++ b/src/components/fields/ConnectTable/SideDrawerField.tsx
@@ -1,78 +1,90 @@
-import { Controller } from "react-hook-form";
+import { useMemo } from "react";
+import { useAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { find, isEqual } from "lodash-es";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Grid, Chip } from "@mui/material";
 
 import ConnectTableSelect from "./ConnectTableSelect";
+import { tableScope, tableRowsAtom } from "@src/atoms/tableScope";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function ConnectTable({
   column,
-  control,
+  _rowy_ref,
+  value,
+  onChange,
+  onSubmit,
   disabled,
-  useFormMethods,
 }: ISideDrawerFieldProps) {
+  const [row] = useAtom(
+    useMemo(
+      () =>
+        selectAtom(
+          tableRowsAtom,
+          (tableRows) => find(tableRows, ["_rowy_ref.path", _rowy_ref.path]),
+          isEqual
+        ),
+      [_rowy_ref.path]
+    ),
+    tableScope
+  );
+
   const config = column.config ?? {};
 
+  const handleDelete = (docPath: string) => () => {
+    if (column.config?.multiple === false) onChange(null);
+    else onChange(value.filter((v: any) => v.docPath !== docPath));
+    onSubmit();
+  };
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        const handleDelete = (docPath: string) => () => {
-          if (column.config?.multiple === false) onChange(null);
-          else onChange(value.filter((v: any) => v.docPath !== docPath));
-        };
+    <>
+      {!disabled && (
+        <ConnectTableSelect
+          row={row}
+          column={column}
+          config={(config as any) ?? {}}
+          value={value}
+          onChange={onChange}
+          TextFieldProps={{
+            label: "",
+            hiddenLabel: true,
+            fullWidth: true,
+            onBlur: onSubmit,
+            id: getFieldId(column.key),
+          }}
+        />
+      )}
 
-        return (
-          <>
-            {!disabled && (
-              <ConnectTableSelect
-                row={useFormMethods.getValues()}
-                column={column}
-                config={(config as any) ?? {}}
-                value={value}
-                onChange={onChange}
-                TextFieldProps={{
-                  label: "",
-                  hiddenLabel: true,
-                  fullWidth: true,
-                  onBlur,
-                }}
-              />
-            )}
-
-            {value && (
-              <Grid container spacing={0.5} style={{ marginTop: 2 }}>
-                {Array.isArray(value) ? (
-                  value.map(({ snapshot, docPath }) => (
-                    <Grid item key={docPath}>
-                      <Chip
-                        component="li"
-                        label={column.config?.primaryKeys
-                          ?.map((key: string) => snapshot[key])
-                          .join(" ")}
-                        onDelete={disabled ? undefined : handleDelete(docPath)}
-                      />
-                    </Grid>
-                  ))
-                ) : value ? (
-                  <Grid item>
-                    <Chip
-                      component="li"
-                      label={column.config?.primaryKeys
-                        ?.map((key: string) => value.snapshot[key])
-                        .join(" ")}
-                      onDelete={
-                        disabled ? undefined : handleDelete(value.docPath)
-                      }
-                    />
-                  </Grid>
-                ) : null}
+      {value && (
+        <Grid container spacing={0.5} style={{ marginTop: 2 }}>
+          {Array.isArray(value) ? (
+            value.map(({ snapshot, docPath }) => (
+              <Grid item key={docPath}>
+                <Chip
+                  component="li"
+                  label={column.config?.primaryKeys
+                    ?.map((key: string) => snapshot[key])
+                    .join(" ")}
+                  onDelete={disabled ? undefined : handleDelete(docPath)}
+                />
               </Grid>
-            )}
-          </>
-        );
-      }}
-    />
+            ))
+          ) : value ? (
+            <Grid item>
+              <Chip
+                component="li"
+                label={column.config?.primaryKeys
+                  ?.map((key: string) => value.snapshot[key])
+                  .join(" ")}
+                onDelete={disabled ? undefined : handleDelete(value.docPath)}
+              />
+            </Grid>
+          ) : null}
+        </Grid>
+      )}
+    </>
   );
 }
diff --git a/src/components/fields/Connector/SideDrawerField.tsx b/src/components/fields/Connector/SideDrawerField.tsx
index 20bf3d48..feccb0aa 100644
--- a/src/components/fields/Connector/SideDrawerField.tsx
+++ b/src/components/fields/Connector/SideDrawerField.tsx
@@ -1,74 +1,68 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { get } from "lodash-es";
 
-import { useTheme, Grid, Chip } from "@mui/material";
+import { Grid, Chip } from "@mui/material";
 
-import ConnectServiceSelect from "./Select";
+import ConnectorSelect from "./Select";
 import { getLabel } from "./utils";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
-export default function ConnectService({
+export default function Connector({
   column,
-  control,
+  _rowy_ref,
+  value,
+  onDirty,
+  onChange,
+  onSubmit,
   disabled,
-  docRef,
 }: ISideDrawerFieldProps) {
-  const theme = useTheme();
-
   const config = column.config ?? {};
-  const displayKey = config.titleKey ?? config.primaryKey;
+
+  const handleDelete = (id: any) => () => {
+    // if (multiple)
+    onChange(value.filter((v: any) => get(v, config.elementId) !== id));
+    // else form.setFieldValue(field.name, []);
+    onSubmit();
+  };
 
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        const handleDelete = (id: any) => () => {
-          // if (multiple)
-          onChange(value.filter((v: any) => get(v, config.elementId) !== id));
-          // else form.setFieldValue(field.name, []);
-        };
+    <>
+      {!disabled && (
+        <ConnectorSelect
+          column={column}
+          value={value}
+          onChange={onChange}
+          docRef={_rowy_ref as any}
+          TextFieldProps={{
+            label: "",
+            hiddenLabel: true,
+            fullWidth: true,
+            onBlur: onSubmit,
+            SelectProps: {
+              renderValue: () => `${value?.length ?? 0} selected`,
+            },
+            id: getFieldId(column.key),
+          }}
+        />
+      )}
 
-        return (
-          <>
-            {!disabled && (
-              <ConnectServiceSelect
-                column={column}
-                value={value}
-                onChange={onChange}
-                docRef={docRef}
-                TextFieldProps={{
-                  label: "",
-                  hiddenLabel: true,
-                  fullWidth: true,
-                  onBlur,
-                  SelectProps: {
-                    renderValue: () => `${value?.length ?? 0} selected`,
-                  },
-                }}
-              />
-            )}
-
-            {Array.isArray(value) && (
-              <Grid container spacing={0.5} style={{ marginTop: 2 }}>
-                {value.map((item) => {
-                  const key = get(item, config.elementId);
-                  console.log(key, item);
-                  return (
-                    <Grid item key={key}>
-                      <Chip
-                        component="li"
-                        label={getLabel(config, item)}
-                        onDelete={disabled ? undefined : handleDelete(key)}
-                      />
-                    </Grid>
-                  );
-                })}
+      {Array.isArray(value) && (
+        <Grid container spacing={0.5} style={{ marginTop: 2 }}>
+          {value.map((item) => {
+            const key = get(item, config.elementId);
+            console.log(key, item);
+            return (
+              <Grid item key={key}>
+                <Chip
+                  component="li"
+                  label={getLabel(config, item)}
+                  onDelete={disabled ? undefined : handleDelete(key)}
+                />
               </Grid>
-            )}
-          </>
-        );
-      }}
-    />
+            );
+          })}
+        </Grid>
+      )}
+    </>
   );
 }
diff --git a/src/components/fields/CreatedAt/SideDrawerField.tsx b/src/components/fields/CreatedAt/SideDrawerField.tsx
index e381e7b2..c9a5c574 100644
--- a/src/components/fields/CreatedAt/SideDrawerField.tsx
+++ b/src/components/fields/CreatedAt/SideDrawerField.tsx
@@ -1,5 +1,3 @@
-import { useWatch } from "react-hook-form";
-import { useAtom } from "jotai";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box } from "@mui/material";
@@ -7,19 +5,12 @@ import { fieldSx } from "@src/components/SideDrawer/utils";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
 
-export default function CreatedAt({ control, column }: ISideDrawerFieldProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = useWatch({
-    control,
-    name: tableSettings.auditFieldCreatedBy || "_createdBy",
-  });
-
-  if (!value || !value.timestamp) return <Box sx={fieldSx} />;
+export default function CreatedAt({ column, value }: ISideDrawerFieldProps) {
+  if (!value) return <Box sx={fieldSx} />;
 
   const dateLabel = format(
-    value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
+    value.toDate ? value.toDate() : value,
     column.config?.format || DATE_TIME_FORMAT
   );
 
diff --git a/src/components/fields/CreatedAt/TableCell.tsx b/src/components/fields/CreatedAt/TableCell.tsx
index 7fd6e5a8..b659618d 100644
--- a/src/components/fields/CreatedAt/TableCell.tsx
+++ b/src/components/fields/CreatedAt/TableCell.tsx
@@ -1,17 +1,12 @@
-import { useAtom } from "jotai";
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
 
-export default function CreatedAt({ row, column }: IHeavyCellProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = row[tableSettings.auditFieldCreatedBy || "_createdBy"];
-
-  if (!value || !value.timestamp) return null;
+export default function CreatedAt({ column, value }: IHeavyCellProps) {
+  if (!value) return null;
   const dateLabel = format(
-    value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
+    value.toDate ? value.toDate() : value,
     column.config?.format || DATE_TIME_FORMAT
   );
 
diff --git a/src/components/fields/CreatedBy/SideDrawerField.tsx b/src/components/fields/CreatedBy/SideDrawerField.tsx
index 28da6954..64a63846 100644
--- a/src/components/fields/CreatedBy/SideDrawerField.tsx
+++ b/src/components/fields/CreatedBy/SideDrawerField.tsx
@@ -1,5 +1,3 @@
-import { useWatch } from "react-hook-form";
-import { useAtom } from "jotai";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box, Stack, Typography, Avatar } from "@mui/material";
@@ -7,16 +5,8 @@ import { fieldSx } from "@src/components/SideDrawer/utils";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
-
-export default function CreatedBy({ control, column }: ISideDrawerFieldProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-
-  const value = useWatch({
-    control,
-    name: tableSettings.auditFieldCreatedBy || "_createdBy",
-  });
 
+export default function CreatedBy({ column, value }: ISideDrawerFieldProps) {
   if (!value || !value.displayName || !value.timestamp)
     return <Box sx={fieldSx} />;
 
diff --git a/src/components/fields/CreatedBy/TableCell.tsx b/src/components/fields/CreatedBy/TableCell.tsx
index c5facf0e..69cc68e9 100644
--- a/src/components/fields/CreatedBy/TableCell.tsx
+++ b/src/components/fields/CreatedBy/TableCell.tsx
@@ -1,16 +1,11 @@
-import { useAtom } from "jotai";
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { Tooltip, Stack, Avatar } from "@mui/material";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
-
-export default function CreatedBy({ row, column }: IHeavyCellProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = row[tableSettings.auditFieldCreatedBy || "_createdBy"];
 
+export default function CreatedBy({ column, value }: IHeavyCellProps) {
   if (!value || !value.displayName || !value.timestamp) return null;
   const dateLabel = format(
     value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
diff --git a/src/components/fields/Date/SideDrawerField.tsx b/src/components/fields/Date/SideDrawerField.tsx
index 7999ab87..b4d3c907 100644
--- a/src/components/fields/Date/SideDrawerField.tsx
+++ b/src/components/fields/Date/SideDrawerField.tsx
@@ -1,68 +1,68 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import DatePicker from "@mui/lab/DatePicker";
 import { TextField } from "@mui/material";
 
+import { getFieldId } from "@src/components/SideDrawer/utils";
 import { transformValue, sanitizeValue } from "./utils";
 import { DATE_FORMAT } from "@src/constants/dates";
 import { DateIcon } from ".";
 
 export interface IDateProps extends ISideDrawerFieldProps {}
 
-export default function Date_({ column, control }: IDateProps) {
+export default function Date_({
+  column,
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: IDateProps) {
   const format = column.config?.format ?? DATE_FORMAT;
 
+  const transformedValue = transformValue(value);
+
+  const handleChange = (date: Date | null) => {
+    const sanitized = sanitizeValue(date);
+    if (sanitized === undefined) return;
+    onChange(sanitized);
+  };
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => {
-        const transformedValue = transformValue(value);
-
-        const handleChange = (date: Date | null) => {
-          const sanitized = sanitizeValue(date);
-          if (sanitized === undefined) return;
-          onChange(sanitized);
-        };
-
-        return (
-          <DatePicker
-            renderInput={(props) => (
-              <TextField
-                {...props}
-                fullWidth
-                label=""
-                hiddenLabel
-                aria-label={column.name as string}
-                InputProps={{
-                  ...props.InputProps,
-                  endAdornment: props.InputProps?.endAdornment || (
-                    <DateIcon color="action" />
-                  ),
-                }}
-                sx={{
-                  "& .MuiInputBase-input": {
-                    fontVariantNumeric: "tabular-nums",
-                  },
-                  "& .MuiInputAdornment-root": { m: 0 },
-                }}
-                // Touch mode: make the whole field clickable
-                onClick={props.inputProps?.onClick as any}
-              />
-            )}
-            label={column.name}
-            value={transformedValue}
-            onChange={handleChange}
-            inputFormat={format}
-            mask={format.replace(/[A-Za-z]/g, "_")}
-            clearable
-            OpenPickerButtonProps={{ size: "small" }}
-            components={{ OpenPickerIcon: DateIcon }}
-            disableOpenPicker={false}
-          />
-        );
-      }}
+    <DatePicker
+      renderInput={(props) => (
+        <TextField
+          {...props}
+          fullWidth
+          label=""
+          hiddenLabel
+          aria-label={column.name as string}
+          InputProps={{
+            ...props.InputProps,
+            endAdornment: props.InputProps?.endAdornment || (
+              <DateIcon color="action" />
+            ),
+          }}
+          sx={{
+            "& .MuiInputBase-input": { fontVariantNumeric: "tabular-nums" },
+            "& .MuiInputAdornment-root": { m: 0 },
+          }}
+          // Touch mode: make the whole field clickable
+          onClick={props.inputProps?.onClick as any}
+          onBlur={onSubmit}
+          id={getFieldId(column.key)}
+        />
+      )}
+      label={column.name}
+      value={transformedValue}
+      onChange={handleChange}
+      onAccept={onSubmit}
+      inputFormat={format}
+      mask={format.replace(/[A-Za-z]/g, "_")}
+      clearable
+      OpenPickerButtonProps={{ size: "small" }}
+      components={{ OpenPickerIcon: DateIcon }}
+      disableOpenPicker={false}
+      disabled={disabled}
     />
   );
 }
diff --git a/src/components/fields/Date/utils.ts b/src/components/fields/Date/utils.ts
index 02c366f2..b82aeb0e 100644
--- a/src/components/fields/Date/utils.ts
+++ b/src/components/fields/Date/utils.ts
@@ -1,4 +1,4 @@
-export const transformValue = (value: any) => {
+export const transformValue = (value: any): Date | null => {
   if (typeof value === "number") return new Date(value);
   if (value && "toDate" in value) return value.toDate();
   if (value !== undefined) return value;
diff --git a/src/components/fields/DateTime/SideDrawerField.tsx b/src/components/fields/DateTime/SideDrawerField.tsx
index 51a32f16..5e0af4ef 100644
--- a/src/components/fields/DateTime/SideDrawerField.tsx
+++ b/src/components/fields/DateTime/SideDrawerField.tsx
@@ -1,4 +1,3 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import DatePicker from "@mui/lab/DatePicker";
@@ -10,63 +9,64 @@ import {
 } from "@src/components/fields/Date/utils";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
 import { DateTimeIcon } from ".";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export interface IDateProps extends ISideDrawerFieldProps {}
 
-export default function Date_({ column, control }: IDateProps) {
+export default function Date_({
+  column,
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: IDateProps) {
   const format = column.config?.format ?? DATE_TIME_FORMAT;
 
+  const transformedValue = transformValue(value);
+
+  const handleChange = (date: Date | null) => {
+    const sanitized = sanitizeValue(date);
+    if (sanitized === undefined) return;
+    onChange(sanitized);
+  };
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => {
-        const transformedValue = transformValue(value);
-
-        const handleChange = (date: Date | null) => {
-          const sanitized = sanitizeValue(date);
-          if (sanitized === undefined) return;
-          onChange(sanitized);
-        };
-
-        return (
-          <DatePicker
-            renderInput={(props) => (
-              <TextField
-                {...props}
-                fullWidth
-                label=""
-                hiddenLabel
-                aria-label={column.name as string}
-                InputProps={{
-                  ...props.InputProps,
-                  endAdornment: props.InputProps?.endAdornment || (
-                    <DateTimeIcon color="action" />
-                  ),
-                }}
-                sx={{
-                  "& .MuiInputBase-input": {
-                    fontVariantNumeric: "tabular-nums",
-                  },
-                  "& .MuiInputAdornment-root": { m: 0 },
-                }}
-                // Touch mode: make the whole field clickable
-                onClick={props.inputProps?.onClick as any}
-              />
-            )}
-            label={column.name}
-            value={transformedValue}
-            onChange={handleChange}
-            inputFormat={format}
-            mask={format.replace(/[A-Za-z]/g, "_")}
-            clearable
-            OpenPickerButtonProps={{ size: "small" }}
-            components={{ OpenPickerIcon: DateTimeIcon }}
-            disableOpenPicker={false}
-            showToolbar
-          />
-        );
-      }}
+    <DatePicker
+      renderInput={(props) => (
+        <TextField
+          {...props}
+          fullWidth
+          label=""
+          hiddenLabel
+          aria-label={column.name as string}
+          InputProps={{
+            ...props.InputProps,
+            endAdornment: props.InputProps?.endAdornment || (
+              <DateTimeIcon color="action" />
+            ),
+          }}
+          sx={{
+            "& .MuiInputBase-input": { fontVariantNumeric: "tabular-nums" },
+            "& .MuiInputAdornment-root": { m: 0 },
+          }}
+          // Touch mode: make the whole field clickable
+          onClick={props.inputProps?.onClick as any}
+          onBlur={onSubmit}
+          id={getFieldId(column.key)}
+        />
+      )}
+      label={column.name}
+      value={transformedValue}
+      onChange={handleChange}
+      onAccept={onSubmit}
+      inputFormat={format}
+      mask={format.replace(/[A-Za-z]/g, "_")}
+      clearable
+      OpenPickerButtonProps={{ size: "small" }}
+      components={{ OpenPickerIcon: DateTimeIcon }}
+      disableOpenPicker={false}
+      showToolbar
+      disabled={disabled}
     />
   );
 }
diff --git a/src/components/fields/DateTime/TableCell.tsx b/src/components/fields/DateTime/TableCell.tsx
index 32124a32..72054181 100644
--- a/src/components/fields/DateTime/TableCell.tsx
+++ b/src/components/fields/DateTime/TableCell.tsx
@@ -22,7 +22,7 @@ export default function DateTime({
 
   const handleDateChange = useDebouncedCallback((date: Date | null) => {
     const sanitized = sanitizeValue(date);
-    if (sanitized === undefined) return;
+    if (!sanitized) return; // Temp disable setting it to null
     onSubmit(sanitized);
   }, 500);
 
diff --git a/src/components/fields/Duration/SideDrawerField.tsx b/src/components/fields/Duration/SideDrawerField.tsx
index dc16fbac..9cdc6be4 100644
--- a/src/components/fields/Duration/SideDrawerField.tsx
+++ b/src/components/fields/Duration/SideDrawerField.tsx
@@ -1,31 +1,121 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
-import { Box } from "@mui/material";
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { Box, Stack, TextField } from "@mui/material";
+import DatePicker from "@mui/lab/DatePicker";
+import DateTimeIcon from "@mui/icons-material/AccessTime";
+
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { getDurationString } from "./utils";
+import { DATE_TIME_FORMAT } from "@src/constants/dates";
+import {
+  transformValue,
+  sanitizeValue,
+} from "@src/components/fields/Date/utils";
+
+export default function Duration({
+  column,
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: ISideDrawerFieldProps) {
+  const format = column.config?.format ?? DATE_TIME_FORMAT;
+
+  const startValue = transformValue(value?.start);
+  const endValue = transformValue(value?.end);
+
+  const handleChange = (pos: "start" | "end") => (date: Date | null) => {
+    const sanitized = sanitizeValue(date);
+    if (sanitized === undefined) return;
+    onChange({ start: startValue, end: endValue, [pos]: sanitized });
+  };
 
-export default function Duration({ column, control }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { value } }) => {
-        if (
-          !value ||
-          !value.start ||
-          !("toDate" in value.start) ||
-          !value.end ||
-          !("toDate" in value.end)
-        )
-          return <Box sx={fieldSx} />;
+    <>
+      <Box
+        sx={[fieldSx, (!startValue || !endValue) && { color: "text.disabled" }]}
+        id={getFieldId(column.key)}
+      >
+        {startValue && endValue
+          ? getDurationString(startValue, endValue)
+          : "00h 00m 00s"}
+      </Box>
 
-        return (
-          <Box sx={fieldSx}>
-            {getDurationString(value.start.toDate(), value.end.toDate())}
-          </Box>
-        );
-      }}
-    />
+      <Stack direction="row" spacing={1} sx={{ mt: 0.5 }}>
+        <DatePicker
+          renderInput={(props) => (
+            <TextField
+              {...props}
+              label="Start"
+              fullWidth
+              hiddenLabel
+              aria-label={column.name as string}
+              InputProps={{
+                ...props.InputProps,
+                endAdornment: props.InputProps?.endAdornment || (
+                  <DateTimeIcon color="action" />
+                ),
+              }}
+              sx={{
+                "& .MuiInputBase-input": { fontVariantNumeric: "tabular-nums" },
+                "& .MuiInputAdornment-root": { m: 0 },
+              }}
+              // Touch mode: make the whole field clickable
+              onClick={props.inputProps?.onClick as any}
+              onBlur={onSubmit}
+            />
+          )}
+          label={column.name + ": Start"}
+          value={startValue}
+          onChange={handleChange("start")}
+          onAccept={onSubmit}
+          inputFormat={format}
+          mask={format.replace(/[A-Za-z]/g, "_")}
+          clearable
+          OpenPickerButtonProps={{ size: "small" }}
+          components={{ OpenPickerIcon: DateTimeIcon }}
+          disableOpenPicker={false}
+          showToolbar
+          disabled={disabled}
+        />
+
+        <DatePicker
+          renderInput={(props) => (
+            <TextField
+              {...props}
+              fullWidth
+              label="End"
+              hiddenLabel
+              aria-label={column.name as string}
+              InputProps={{
+                ...props.InputProps,
+                endAdornment: props.InputProps?.endAdornment || (
+                  <DateTimeIcon color="action" />
+                ),
+              }}
+              sx={{
+                "& .MuiInputBase-input": { fontVariantNumeric: "tabular-nums" },
+                "& .MuiInputAdornment-root": { m: 0 },
+              }}
+              // Touch mode: make the whole field clickable
+              onClick={props.inputProps?.onClick as any}
+              onBlur={onSubmit}
+            />
+          )}
+          label={column.name + ": End"}
+          value={endValue}
+          onChange={handleChange("end")}
+          onAccept={onSubmit}
+          inputFormat={format}
+          mask={format.replace(/[A-Za-z]/g, "_")}
+          clearable
+          OpenPickerButtonProps={{ size: "small" }}
+          components={{ OpenPickerIcon: DateTimeIcon }}
+          disableOpenPicker={false}
+          showToolbar
+          disabled={disabled}
+        />
+      </Stack>
+    </>
   );
 }
diff --git a/src/components/fields/Duration/index.tsx b/src/components/fields/Duration/index.tsx
index 81148303..1c82fe03 100644
--- a/src/components/fields/Duration/index.tsx
+++ b/src/components/fields/Duration/index.tsx
@@ -4,7 +4,7 @@ import withHeavyCell from "@src/components/fields/_withTableCell/withHeavyCell";
 
 import DurationIcon from "@mui/icons-material/TimerOutlined";
 import BasicCell from "@src/components/fields/_BasicCell/BasicCellNull";
-import NullEditor from "@src/components/Table/editors/NullEditor";
+import withSideDrawerEditor from "@src/components/Table/editors/withSideDrawerEditor";
 
 const TableCell = lazy(
   () => import("./TableCell" /* webpackChunkName: "TableCell-Duration" */)
@@ -25,7 +25,7 @@ export const config: IFieldConfig = {
   icon: <DurationIcon />,
   description: "Duration calculated from two timestamps.",
   TableCell: withHeavyCell(BasicCell, TableCell),
-  TableEditor: NullEditor as any,
+  TableEditor: withSideDrawerEditor(TableCell),
   SideDrawerField,
 };
 export default config;
diff --git a/src/components/fields/Email/SideDrawerField.tsx b/src/components/fields/Email/SideDrawerField.tsx
index 12cca4e1..56f75262 100644
--- a/src/components/fields/Email/SideDrawerField.tsx
+++ b/src/components/fields/Email/SideDrawerField.tsx
@@ -1,36 +1,30 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { TextField } from "@mui/material";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Email({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        return (
-          <TextField
-            variant="filled"
-            fullWidth
-            margin="none"
-            onChange={onChange}
-            onBlur={onBlur}
-            value={value}
-            id={`sidedrawer-field-${column.key}`}
-            label=""
-            hiddenLabel
-            disabled={disabled}
-            inputProps={{
-              autoComplete: "email",
-              maxLength: column.config?.maxLength,
-            }}
-          />
-        );
+    <TextField
+      variant="filled"
+      fullWidth
+      margin="none"
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onSubmit}
+      value={value}
+      id={getFieldId(column.key)}
+      label=""
+      hiddenLabel
+      disabled={disabled}
+      inputProps={{
+        autoComplete: "email",
+        maxLength: column.config?.maxLength,
       }}
     />
   );
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index 34b8a50c..0bc14268 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useState } from "react";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { useSetAtom } from "jotai";
-import { Controller } from "react-hook-form";
 import { format } from "date-fns";
 
 import { useDropzone } from "react-dropzone";
@@ -21,27 +20,19 @@ import { FileIcon } from ".";
 import CircularProgressOptical from "@src/components/CircularProgressOptical";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { globalScope, confirmDialogAtom } from "@src/atoms/globalScope";
-import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import { FileValue } from "@src/types/table";
 
-interface IControlledFileUploaderProps
-  extends Pick<ISideDrawerFieldProps, "column" | "docRef" | "disabled"> {
-  onChange: (value: any) => void;
-  value: any;
-}
-
-function ControlledFileUploader({
-  onChange,
-
-  value,
+export default function File_({
   column,
-  docRef,
+  _rowy_ref,
+  value,
+  onChange,
+  onSubmit,
   disabled,
-}: IControlledFileUploaderProps) {
+}: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, globalScope);
-  const updateField = useSetAtom(updateFieldAtom, tableScope);
 
   const { uploaderState, upload, deleteUpload } = useUploader();
 
@@ -52,26 +43,22 @@ function ControlledFileUploader({
     (acceptedFiles: File[]) => {
       const file = acceptedFiles[0];
 
-      if (docRef && file) {
+      if (_rowy_ref && file) {
         upload({
-          docRef: docRef! as any,
+          docRef: _rowy_ref! as any,
           fieldName: column.key,
           files: [file],
           previousValue: value ?? [],
           onComplete: (newValue) => {
-            updateField({
-              path: docRef.path,
-              fieldName: column.key,
-              value: newValue,
-            });
             onChange(newValue);
+            onSubmit();
             setLocalFile("");
           },
         });
         setLocalFile(file.name);
       }
     },
-    [docRef, value]
+    [_rowy_ref, value]
   );
 
   const handleDelete = (index: number) => {
@@ -79,6 +66,7 @@ function ControlledFileUploader({
     const toBeDeleted = newValue.splice(index, 1);
     toBeDeleted.length && deleteUpload(toBeDeleted[0]);
     onChange(newValue);
+    onSubmit();
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -109,7 +97,7 @@ function ControlledFileUploader({
           ]}
           {...getRootProps()}
         >
-          <input id={`sidedrawer-field-${column.key}`} {...getInputProps()} />
+          <input id={getFieldId(column.key)} {...getInputProps()} />
           <Typography color="inherit" style={{ flexGrow: 1 }}>
             Click to upload or drop file here
           </Typography>
@@ -163,26 +151,3 @@ function ControlledFileUploader({
     </>
   );
 }
-
-export default function File_({
-  control,
-  column,
-  disabled,
-  docRef,
-}: ISideDrawerFieldProps) {
-  return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => (
-        <ControlledFileUploader
-          disabled={disabled}
-          column={column}
-          docRef={docRef}
-          onChange={onChange}
-          value={value}
-        />
-      )}
-    />
-  );
-}
diff --git a/src/components/fields/Id/SideDrawerField.tsx b/src/components/fields/Id/SideDrawerField.tsx
index 68ad0525..455ab458 100644
--- a/src/components/fields/Id/SideDrawerField.tsx
+++ b/src/components/fields/Id/SideDrawerField.tsx
@@ -3,10 +3,10 @@ import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { Box } from "@mui/material";
 import { fieldSx } from "@src/components/SideDrawer/utils";
 
-export default function Id({ docRef }: ISideDrawerFieldProps) {
+export default function Id({ _rowy_ref }: ISideDrawerFieldProps) {
   return (
     <Box sx={[fieldSx, { fontFamily: "fontFamilyMono", userSelect: "all" }]}>
-      {docRef?.id}
+      {_rowy_ref?.id}
     </Box>
   );
 }
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index 2446b9ed..fedea3c4 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -1,7 +1,6 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { useCallback, useState } from "react";
 import { useSetAtom } from "jotai";
-import { Controller } from "react-hook-form";
 
 import { useDropzone } from "react-dropzone";
 // TODO: GENERALIZE
@@ -23,9 +22,8 @@ import Thumbnail from "@src/components/Thumbnail";
 import CircularProgressOptical from "@src/components/CircularProgressOptical";
 
 import { globalScope, confirmDialogAtom } from "@src/atoms/globalScope";
-import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import { IMAGE_MIME_TYPES } from ".";
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 
 const imgSx = {
   position: "relative",
@@ -65,7 +63,7 @@ const deleteImgHoverSx = {
 
   backgroundColor: "transparent",
 
-  "$img:hover &": {
+  ".img:hover &": {
     backgroundColor: (theme: Theme) =>
       alpha(theme.palette.background.paper, 0.8),
     "& *": { opacity: 1 },
@@ -80,21 +78,15 @@ const deleteImgHoverSx = {
   },
 };
 
-interface IControlledImageUploaderProps
-  extends Pick<ISideDrawerFieldProps, "column" | "docRef" | "disabled"> {
-  onChange: (value: any) => void;
-  value: any;
-}
-
-function ControlledImageUploader({
-  onChange,
-  value,
+export default function Image_({
   column,
-  docRef,
+  _rowy_ref,
+  value,
+  onChange,
+  onSubmit,
   disabled,
-}: IControlledImageUploaderProps) {
+}: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, globalScope);
-  const updateField = useSetAtom(updateFieldAtom, tableScope);
   const { uploaderState, upload, deleteUpload } = useUploader();
   const { progress } = uploaderState;
 
@@ -105,26 +97,22 @@ function ControlledImageUploader({
     (acceptedFiles: File[]) => {
       const imageFile = acceptedFiles[0];
 
-      if (docRef && imageFile) {
+      if (_rowy_ref && imageFile) {
         upload({
-          docRef: docRef! as any,
+          docRef: _rowy_ref! as any,
           fieldName: column.key,
           files: [imageFile],
           previousValue: value ?? [],
           onComplete: (newValue) => {
-            updateField({
-              path: docRef.path,
-              fieldName: column.key,
-              value: newValue,
-            });
             onChange(newValue);
+            onSubmit();
             setLocalImage("");
           },
         });
         setLocalImage(URL.createObjectURL(imageFile));
       }
     },
-    [docRef, value]
+    [_rowy_ref, value]
   );
 
   const handleDelete = (index: number) => {
@@ -132,6 +120,7 @@ function ControlledImageUploader({
     const toBeDeleted = newValue.splice(index, 1);
     toBeDeleted.length && deleteUpload(toBeDeleted[0]);
     onChange(newValue);
+    onSubmit();
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -163,7 +152,7 @@ function ControlledImageUploader({
           ]}
           {...getRootProps()}
         >
-          <input id={`sidedrawer-field-${column.key}`} {...getInputProps()} />
+          <input id={getFieldId(column.key)} {...getInputProps()} />
           <Typography color="inherit" style={{ flexGrow: 1 }}>
             {isDragActive
               ? "Drop image here"
@@ -182,6 +171,7 @@ function ControlledImageUploader({
                   <ButtonBase
                     sx={imgSx}
                     onClick={() => window.open(image.downloadURL, "_blank")}
+                    className="img"
                   >
                     <Thumbnail
                       imageUrl={image.downloadURL}
@@ -213,6 +203,7 @@ function ControlledImageUploader({
                           handleConfirm: () => handleDelete(i),
                         })
                       }
+                      className="img"
                     >
                       <Thumbnail
                         imageUrl={image.downloadURL}
@@ -240,6 +231,7 @@ function ControlledImageUploader({
             <ButtonBase
               sx={imgSx}
               style={{ backgroundImage: `url("${localImage}")` }}
+              className="img"
             >
               <Grid
                 container
@@ -261,26 +253,3 @@ function ControlledImageUploader({
     </>
   );
 }
-
-export default function Image_({
-  control,
-  column,
-  disabled,
-  docRef,
-}: ISideDrawerFieldProps) {
-  return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => (
-        <ControlledImageUploader
-          disabled={disabled}
-          column={column}
-          docRef={docRef}
-          onChange={onChange}
-          value={value}
-        />
-      )}
-    />
-  );
-}
diff --git a/src/components/fields/Json/SideDrawerField.tsx b/src/components/fields/Json/SideDrawerField.tsx
index c961f835..ab9a27ca 100644
--- a/src/components/fields/Json/SideDrawerField.tsx
+++ b/src/components/fields/Json/SideDrawerField.tsx
@@ -1,19 +1,22 @@
 import { useState } from "react";
-import { Controller } from "react-hook-form";
 import { useAtom } from "jotai";
 import stringify from "json-stable-stringify-without-jsonify";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import ReactJson, { InteractionProps } from "react-json-view";
 import CodeEditor from "@src/components/CodeEditor";
+import { Typography, Tooltip } from "@mui/material";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
+import LockIcon from "@mui/icons-material/LockOutlined";
 
 import { useTheme, Box, Tab, FormHelperText } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import TabPanel from "@mui/lab/TabPanel";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { globalScope, jsonEditorAtom } from "@src/atoms/globalScope";
+import config from ".";
 
 const isValidJson = (val: any) => {
   try {
@@ -26,8 +29,10 @@ const isValidJson = (val: any) => {
 };
 
 export default function Json({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const theme = useTheme();
@@ -35,106 +40,120 @@ export default function Json({
   const [editor, setEditor] = useAtom(jsonEditorAtom, globalScope);
   const [codeValid, setCodeValid] = useState(true);
 
+  const sanitizedValue =
+    value !== undefined && isValidJson(value)
+      ? value
+      : column.config?.isArray
+      ? []
+      : {};
+  const formattedJson = stringify(sanitizedValue, { space: 2 });
+
+  if (disabled)
+    return (
+      <Box
+        sx={[
+          fieldSx,
+          {
+            whiteSpace: "pre-wrap",
+            typography: "caption",
+            fontFamily: theme.typography.fontFamilyMono,
+            wordBreak: "break-word",
+          },
+        ]}
+      >
+        {value && formattedJson}
+      </Box>
+    );
+
+  const handleEdit = (edit: InteractionProps) => {
+    onChange(edit.updated_src);
+    onSubmit();
+  };
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => {
-        const sanitizedValue =
-          value !== undefined && isValidJson(value)
-            ? value
-            : column.config?.isArray
-            ? []
-            : {};
-        const formattedJson = stringify(sanitizedValue, { space: 2 });
+    <TabContext value={editor}>
+      <TabList
+        onChange={(_, newValue) => {
+          setEditor(newValue);
+          setCodeValid(true);
+        }}
+        aria-label="JSON editor"
+        variant="standard"
+        sx={{
+          minHeight: 32,
+          mt: -32 / 8,
 
-        if (disabled)
-          return (
-            <Box
-              sx={[
-                fieldSx,
-                {
-                  whiteSpace: "pre-wrap",
-                  typography: "caption",
-                  fontFamily: theme.typography.fontFamilyMono,
-                  wordBreak: "break-word",
-                },
-              ]}
-            >
-              {value && formattedJson}
-            </Box>
-          );
+          "& .MuiTabs-flexContainer": { justifyContent: "flex-end" },
+          "& .MuiTab-root": { minHeight: 32, py: 0 },
+        }}
+      >
+        <Tab label="Tree" value="tree" />
+        <Tab label="Code" value="code" />
+      </TabList>
 
-        const handleEdit = (edit: InteractionProps) => {
-          onChange(edit.updated_src);
-        };
+      <TabPanel value="tree" sx={{ p: 0 }}>
+        <Box sx={[fieldSx, { overflowX: "auto", typography: "caption" }]}>
+          <ReactJson
+            src={sanitizedValue}
+            onEdit={handleEdit}
+            onAdd={handleEdit}
+            onDelete={handleEdit}
+            theme={theme.palette.mode === "dark" ? "monokai" : "rjv-default"}
+            iconStyle="triangle"
+            style={{
+              fontFamily: theme.typography.fontFamilyMono,
+              backgroundColor: "transparent",
+              minHeight: 100 - 4 - 4,
+            }}
+            quotesOnKeys={false}
+            sortKeys
+            id={getFieldId(column.key)}
+          />
+        </Box>
+      </TabPanel>
 
-        return (
-          <TabContext value={editor}>
-            <TabList
-              onChange={(_, newValue) => {
-                setEditor(newValue);
-                setCodeValid(true);
-              }}
-              aria-label="JSON editor"
-              variant="standard"
-              sx={{
-                minHeight: 32,
-                mt: -32 / 8,
+      <TabPanel value="code" sx={{ p: 0 }}>
+        <CodeEditor
+          defaultLanguage="json"
+          value={formattedJson || "{\n  \n}"}
+          onChange={(v) => {
+            try {
+              if (v) onChange(JSON.parse(v));
+            } catch (e) {
+              console.log(`Failed to parse JSON: ${e}`);
+              setCodeValid(false);
+            }
+          }}
+          onValidStatusUpdate={({ isValid }) => setCodeValid(isValid)}
+          error={!codeValid}
+          onBlur={onSubmit}
+          fullScreenTitle={
+            <>
+              {config.icon}
 
-                "& .MuiTabs-flexContainer": { justifyContent: "flex-end" },
-                "& .MuiTab-root": { minHeight: 32, py: 0 },
-              }}
-            >
-              <Tab label="Tree" value="tree" />
-              <Tab label="Code" value="code" />
-            </TabList>
+              <Typography variant="h6" component="div" style={{ flexGrow: 1 }}>
+                {column.name}
+              </Typography>
 
-            <TabPanel value="tree" sx={{ p: 0 }}>
-              <Box sx={[fieldSx, { overflowX: "auto", typography: "caption" }]}>
-                <ReactJson
-                  src={sanitizedValue}
-                  onEdit={handleEdit}
-                  onAdd={handleEdit}
-                  onDelete={handleEdit}
-                  theme={
-                    theme.palette.mode === "dark" ? "monokai" : "rjv-default"
-                  }
-                  iconStyle="triangle"
-                  style={{
-                    fontFamily: theme.typography.fontFamilyMono,
-                    backgroundColor: "transparent",
-                    minHeight: 100 - 4 - 4,
-                  }}
-                  quotesOnKeys={false}
-                />
-              </Box>
-            </TabPanel>
-
-            <TabPanel value="code" sx={{ p: 0 }}>
-              <CodeEditor
-                defaultLanguage="json"
-                value={formattedJson || "{\n  \n}"}
-                onChange={(v) => {
-                  try {
-                    if (v) onChange(JSON.parse(v));
-                  } catch (e) {
-                    console.log(`Failed to parse JSON: ${e}`);
-                    setCodeValid(false);
-                  }
-                }}
-                onValidStatusUpdate={({ isValid }) => setCodeValid(isValid)}
-                error={!codeValid}
-              />
-              {!codeValid && (
-                <FormHelperText error variant="filled">
-                  Invalid JSON
-                </FormHelperText>
+              {column.hidden && (
+                <Tooltip title="Hidden in your table view">
+                  <VisibilityOffIcon color="action" />
+                </Tooltip>
               )}
-            </TabPanel>
-          </TabContext>
-        );
-      }}
-    />
+              {disabled && (
+                <Tooltip title="Locked by ADMIN">
+                  <LockIcon color="action" />
+                </Tooltip>
+              )}
+            </>
+          }
+        />
+        {!codeValid && (
+          <FormHelperText error variant="filled">
+            Invalid JSON
+          </FormHelperText>
+        )}
+      </TabPanel>
+    </TabContext>
   );
 }
diff --git a/src/components/fields/LongText/SideDrawerField.tsx b/src/components/fields/LongText/SideDrawerField.tsx
index 96ed5403..0a9e4616 100644
--- a/src/components/fields/LongText/SideDrawerField.tsx
+++ b/src/components/fields/LongText/SideDrawerField.tsx
@@ -1,36 +1,30 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { TextField } from "@mui/material";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function LongText({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        return (
-          <TextField
-            variant="filled"
-            fullWidth
-            margin="none"
-            onChange={onChange}
-            onBlur={onBlur}
-            value={value}
-            id={`sidedrawer-field-${column.key}`}
-            label=""
-            hiddenLabel
-            disabled={disabled}
-            multiline
-            minRows={3}
-            inputProps={{ maxLength: column.config?.maxLength }}
-          />
-        );
-      }}
+    <TextField
+      variant="filled"
+      fullWidth
+      margin="none"
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onSubmit}
+      value={value}
+      id={getFieldId(column.key)}
+      label=""
+      hiddenLabel
+      disabled={disabled}
+      multiline
+      minRows={3}
+      inputProps={{ maxLength: column.config?.maxLength }}
     />
   );
 }
diff --git a/src/components/fields/MultiSelect/PopoverCell.tsx b/src/components/fields/MultiSelect/PopoverCell.tsx
index 0d54d723..50c0ad05 100644
--- a/src/components/fields/MultiSelect/PopoverCell.tsx
+++ b/src/components/fields/MultiSelect/PopoverCell.tsx
@@ -1,6 +1,6 @@
 import { IPopoverCellProps } from "@src/components/fields/types";
 
-import MultiSelect_ from "@rowy/multiselect";
+import MultiSelectComponent from "@rowy/multiselect";
 
 import { sanitiseValue } from "./utils";
 
@@ -15,7 +15,7 @@ export default function MultiSelect({
   const config = column.config ?? {};
 
   return (
-    <MultiSelect_
+    <MultiSelectComponent
       value={sanitiseValue(value)}
       onChange={onSubmit}
       options={config.options ?? []}
diff --git a/src/components/fields/MultiSelect/SideDrawerField.tsx b/src/components/fields/MultiSelect/SideDrawerField.tsx
index adc979d0..a0290625 100644
--- a/src/components/fields/MultiSelect/SideDrawerField.tsx
+++ b/src/components/fields/MultiSelect/SideDrawerField.tsx
@@ -1,4 +1,3 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Grid } from "@mui/material";
@@ -10,60 +9,56 @@ import { ConvertStringToArray } from "./ConvertStringToArray";
 
 export default function MultiSelect({
   column,
-  control,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const config = column.config ?? {};
 
+  const handleDelete = (index: number) => () => {
+    const newValues = [...value];
+    newValues.splice(index, 1);
+    onChange(newValues);
+    onSubmit();
+  };
+
+  if (typeof value === "string" && value !== "")
+    return <ConvertStringToArray value={value} onSubmit={onChange} />;
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        const handleDelete = (index: number) => () => {
-          const newValues = [...value];
-          newValues.splice(index, 1);
-          onChange(newValues);
-        };
+    <>
+      <MultiSelectComponent
+        value={sanitiseValue(value)}
+        onChange={onChange}
+        options={config.options ?? []}
+        multiple={true}
+        freeText={config.freeText}
+        disabled={disabled}
+        TextFieldProps={{
+          label: "",
+          hiddenLabel: true,
+          onBlur: onSubmit,
+          id: `sidedrawer-field-${column.key}`,
+        }}
+        onClose={onSubmit}
+      />
 
-        if (typeof value === "string" && value !== "")
-          return <ConvertStringToArray value={value} onSubmit={onChange} />;
-
-        return (
-          <>
-            <MultiSelectComponent
-              value={sanitiseValue(value)}
-              onChange={onChange}
-              options={config.options ?? []}
-              multiple={true}
-              freeText={config.freeText}
-              disabled={disabled}
-              TextFieldProps={{
-                label: "",
-                hiddenLabel: true,
-                onBlur,
-                id: `sidedrawer-field-${column.key}`,
-              }}
-            />
-
-            {value && Array.isArray(value) && (
-              <Grid container spacing={0.5} style={{ marginTop: 2 }}>
-                {value.map(
-                  (item, i) =>
-                    item?.length > 0 && (
-                      <Grid item key={item}>
-                        <FormattedChip
-                          label={item}
-                          onDelete={disabled ? undefined : handleDelete(i)}
-                        />
-                      </Grid>
-                    )
-                )}
-              </Grid>
-            )}
-          </>
-        );
-      }}
-    />
+      {value && Array.isArray(value) && (
+        <Grid container spacing={0.5} style={{ marginTop: 2 }}>
+          {value.map(
+            (item, i) =>
+              item?.length > 0 && (
+                <Grid item key={item}>
+                  <FormattedChip
+                    label={item}
+                    onDelete={disabled ? undefined : handleDelete(i)}
+                  />
+                </Grid>
+              )
+          )}
+        </Grid>
+      )}
+    </>
   );
 }
diff --git a/src/components/fields/Number/SideDrawerField.tsx b/src/components/fields/Number/SideDrawerField.tsx
index f65e1756..0b27556e 100644
--- a/src/components/fields/Number/SideDrawerField.tsx
+++ b/src/components/fields/Number/SideDrawerField.tsx
@@ -1,32 +1,28 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { TextField } from "@mui/material";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Number_({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => (
-        <TextField
-          variant="filled"
-          fullWidth
-          margin="none"
-          onChange={(e) => onChange(Number(e.target.value))}
-          onBlur={onBlur}
-          value={value}
-          id={`sidedrawer-field-${column.key}`}
-          label=""
-          hiddenLabel
-          disabled={disabled}
-          type="number"
-        />
-      )}
+    <TextField
+      variant="filled"
+      fullWidth
+      margin="none"
+      onChange={(e) => onChange(Number(e.target.value))}
+      onBlur={onSubmit}
+      value={value}
+      id={getFieldId(column.key)}
+      label=""
+      hiddenLabel
+      disabled={disabled}
+      type="number"
     />
   );
 }
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 01fbd778..ea4e0681 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -1,54 +1,51 @@
-import { Controller, useWatch } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
-import { inputClasses, TextField } from "@mui/material";
+import { TextField, InputAdornment, Box } from "@mui/material";
 import { emphasize } from "@mui/material/styles";
 import { resultColorsScale } from "@src/utils/color";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Percentage({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
-  const value: number | undefined = useWatch({ control, name: column.key });
-
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => (
-        <TextField
-          variant="filled"
-          fullWidth
-          margin="none"
-          onChange={(e) => onChange(Number(e.target.value) / 100)}
-          onBlur={onBlur}
-          value={typeof value === "number" ? value * 100 : value}
-          id={`sidedrawer-field-${column.key}`}
-          label=""
-          hiddenLabel
-          disabled={disabled}
-          type="number"
-          InputProps={{
-            endAdornment: "%",
-            sx: {
-              backgroundColor:
-                typeof value === "number"
-                  ? resultColorsScale(value).toHex() + "!important"
-                  : undefined,
-              color:
-                typeof value === "number"
-                  ? emphasize(resultColorsScale(value).toHex(), 1) +
-                    "!important"
-                  : undefined,
-
-              [`& ${inputClasses.underline}::after`]: {
-                borderColor: "text.primary",
-              },
-            },
-          }}
-        />
-      )}
+    <TextField
+      variant="filled"
+      fullWidth
+      margin="none"
+      onChange={(e) => onChange(Number(e.target.value) / 100)}
+      onBlur={onSubmit}
+      value={typeof value === "number" ? value * 100 : value}
+      id={getFieldId(column.key)}
+      label=""
+      hiddenLabel
+      disabled={disabled}
+      type="number"
+      InputProps={{
+        endAdornment: "%",
+        startAdornment: (
+          <InputAdornment position="start" sx={{ mr: 0 }}>
+            <Box
+              sx={{
+                width: 20,
+                height: 20,
+                borderRadius: 0.5,
+                boxShadow: (theme) =>
+                  `0 0 0 1px ${theme.palette.divider} inest`,
+                backgroundColor:
+                  typeof value === "number"
+                    ? resultColorsScale(value).toHex() + "!important"
+                    : undefined,
+              }}
+            />
+          </InputAdornment>
+        ),
+      }}
+      sx={{ "& .MuiFilledInput-root": { pl: 0.75 } }}
     />
   );
 }
diff --git a/src/components/fields/Phone/SideDrawerField.tsx b/src/components/fields/Phone/SideDrawerField.tsx
index fe2c8179..66d66409 100644
--- a/src/components/fields/Phone/SideDrawerField.tsx
+++ b/src/components/fields/Phone/SideDrawerField.tsx
@@ -1,37 +1,31 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { TextField } from "@mui/material";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Phone({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        return (
-          <TextField
-            variant="filled"
-            fullWidth
-            margin="none"
-            onChange={onChange}
-            onBlur={onBlur}
-            value={value}
-            id={`sidedrawer-field-${column.key}`}
-            label=""
-            hiddenLabel
-            disabled={disabled}
-            type="tel"
-            inputProps={{
-              autoComplete: "tel",
-              maxLength: column.config?.maxLength,
-            }}
-          />
-        );
+    <TextField
+      variant="filled"
+      fullWidth
+      margin="none"
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onSubmit}
+      value={value}
+      id={getFieldId(column.key)}
+      label=""
+      hiddenLabel
+      disabled={disabled}
+      type="tel"
+      inputProps={{
+        autoComplete: "tel",
+        maxLength: column.config?.maxLength,
       }}
     />
   );
diff --git a/src/components/fields/Rating/Settings.tsx b/src/components/fields/Rating/Settings.tsx
index 5ae075a7..9894ba95 100644
--- a/src/components/fields/Rating/Settings.tsx
+++ b/src/components/fields/Rating/Settings.tsx
@@ -11,7 +11,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
         value={config.max}
         getAriaValueText={(v) => `${v} max stars`}
         aria-labelledby="max-slider"
-        valueLabelDisplay="auto"
+        valueLabelDisplay="on"
         onChange={(_, v) => {
           onChange("max")(v);
         }}
@@ -27,7 +27,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
         value={config.precision}
         getAriaValueText={(v) => `${v} rating step size`}
         aria-labelledby="precision-slider"
-        valueLabelDisplay="auto"
+        valueLabelDisplay="on"
         onChange={(_, v) => {
           onChange("precision")(v);
         }}
diff --git a/src/components/fields/Rating/SideDrawerField.tsx b/src/components/fields/Rating/SideDrawerField.tsx
index 46b0691d..147d6cbc 100644
--- a/src/components/fields/Rating/SideDrawerField.tsx
+++ b/src/components/fields/Rating/SideDrawerField.tsx
@@ -1,4 +1,3 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Grid } from "@mui/material";
@@ -6,45 +5,36 @@ import { Rating as MuiRating } from "@mui/material";
 import "@mui/lab";
 import StarBorderIcon from "@mui/icons-material/StarBorder";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Rating({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   // Set max and precision from config
-  const {
-    max,
-    precision,
-  }: {
-    max: number;
-    precision: number;
-  } = {
-    max: 5,
-    precision: 1,
-    ...column.config,
-  };
+  const { max, precision } = { max: 5, precision: 1, ...column.config };
 
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => (
-        <Grid container alignItems="center" sx={fieldSx}>
-          <MuiRating
-            name={column.key}
-            id={`sidedrawer-field-${column.key}`}
-            value={typeof value === "number" ? value : 0}
-            disabled={disabled}
-            onChange={(_, newValue) => onChange(newValue)}
-            emptyIcon={<StarBorderIcon fontSize="inherit" />}
-            max={max}
-            precision={precision}
-            sx={{ ml: -0.5 }}
-          />
-        </Grid>
-      )}
-    />
+    <Grid container alignItems="center" sx={fieldSx}>
+      <MuiRating
+        name={column.key}
+        id={`sidedrawer-field-${column.key}`}
+        value={typeof value === "number" ? value : 0}
+        disabled={disabled}
+        onChange={(_, newValue) => {
+          console.log("onChange", newValue);
+          onChange(newValue);
+          onSubmit();
+        }}
+        emptyIcon={<StarBorderIcon fontSize="inherit" />}
+        max={max}
+        precision={precision}
+        sx={{ ml: -0.5 }}
+        id={getFieldId(column.key)}
+      />
+    </Grid>
   );
 }
diff --git a/src/components/fields/Reference/BasicCell.tsx b/src/components/fields/Reference/BasicCell.tsx
index e92f55c5..5ccab9b0 100644
--- a/src/components/fields/Reference/BasicCell.tsx
+++ b/src/components/fields/Reference/BasicCell.tsx
@@ -1,5 +1,41 @@
+import { useAtom } from "jotai";
 import { IBasicCellProps } from "@src/components/fields/types";
 
-export default function Number_({ value }: IBasicCellProps) {
-  return <>{`${value?.path ?? ""}`}</>;
+import { Stack, IconButton } from "@mui/material";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
+
+export default function Reference({ value }: IBasicCellProps) {
+  const [projectId] = useAtom(projectIdAtom, globalScope);
+
+  const path = value?.path ?? "";
+  if (!path) return null;
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      className="cell-collapse-padding"
+      sx={{ p: "var(--cell-padding)", pr: 0.5 }}
+    >
+      <div style={{ flexGrow: 1, overflow: "hidden" }}>{path}</div>
+
+      <IconButton
+        size="small"
+        href={`https://console.firebase.google.com/project/${projectId}/firestore/data/~2F${path.replace(
+          /\//g,
+          "~2F"
+        )}`}
+        target="_blank"
+        rel="noopener"
+        aria-label="Open in Firebase Console"
+        className="row-hover-iconButton"
+        style={{ flexShrink: 0 }}
+      >
+        <LaunchIcon />
+      </IconButton>
+    </Stack>
+  );
 }
diff --git a/src/components/fields/Reference/EditorCell.tsx b/src/components/fields/Reference/EditorCell.tsx
index 3db626dc..7e9cef4b 100644
--- a/src/components/fields/Reference/EditorCell.tsx
+++ b/src/components/fields/Reference/EditorCell.tsx
@@ -1,24 +1,19 @@
-import { useAtom } from "jotai";
-import { globalScope } from "@src/atoms/globalScope";
-
-import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
-
 import { useRef, useLayoutEffect } from "react";
+import { useAtom, useSetAtom } from "jotai";
 import { EditorProps } from "react-data-grid";
-import { useSetAtom } from "jotai";
 import { get } from "lodash-es";
 
 import { TextField } from "@mui/material";
 
+import { globalScope } from "@src/atoms/globalScope";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
 import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
-import { FieldType } from "@src/constants/fields";
-import { getFieldType } from "@src/components/fields";
 import { doc } from "firebase/firestore";
 
 /** WARNING: THIS DOES NOT WORK IN REACT 18 STRICT MODE */
 export default function TextEditor({ row, column }: EditorProps<any>) {
-  const updateField = useSetAtom(updateFieldAtom, tableScope);
   const [firebaseDb] = useAtom(firebaseDbAtom, globalScope);
+  const updateField = useSetAtom(updateFieldAtom, tableScope);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
diff --git a/src/components/fields/Reference/SideDrawerField.tsx b/src/components/fields/Reference/SideDrawerField.tsx
index 68b03cf8..b8f09e81 100644
--- a/src/components/fields/Reference/SideDrawerField.tsx
+++ b/src/components/fields/Reference/SideDrawerField.tsx
@@ -1,18 +1,59 @@
-import { Controller } from "react-hook-form";
+import { useAtom } from "jotai";
+import { doc } from "firebase/firestore";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
+import { Stack, TextField, IconButton } from "@mui/material";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { getFieldId } from "@src/components/SideDrawer/utils";
+
 export default function Reference({
   column,
-  control,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
-  const config = column.config ?? {};
+  const [projectId] = useAtom(projectIdAtom, globalScope);
+  const [firebaseDb] = useAtom(firebaseDbAtom, globalScope);
+
+  const transformedValue =
+    Boolean(value) && "path" in value && typeof value.path === "string"
+      ? value.path
+      : "";
 
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => <></>}
-    />
+    <Stack direction="row">
+      <TextField
+        variant="filled"
+        fullWidth
+        margin="none"
+        onChange={(e) => onChange(doc(firebaseDb, e.target.value))}
+        onBlur={onSubmit}
+        value={transformedValue}
+        id={getFieldId(column.key)}
+        label=""
+        hiddenLabel
+        disabled={disabled}
+      />
+
+      <IconButton
+        size="small"
+        href={`https://console.firebase.google.com/project/${projectId}/firestore/data/~2F${transformedValue.replace(
+          /\//g,
+          "~2F"
+        )}`}
+        target="_blank"
+        rel="noopener"
+        aria-label="Open in Firebase Console"
+        disabled={!transformedValue}
+        edge="end"
+        sx={{ ml: 1 }}
+      >
+        <LaunchIcon />
+      </IconButton>
+    </Stack>
   );
 }
diff --git a/src/components/fields/RichText/SideDrawerField.tsx b/src/components/fields/RichText/SideDrawerField.tsx
index 2b586131..84a95f52 100644
--- a/src/components/fields/RichText/SideDrawerField.tsx
+++ b/src/components/fields/RichText/SideDrawerField.tsx
@@ -1,24 +1,21 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import RichTextEditor from "@src/components/RichTextEditor";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function RichText({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, value } }) => (
-        <RichTextEditor
-          disabled={disabled}
-          value={value}
-          onChange={onChange}
-          id={`sidedrawer-field-${column.key}`}
-        />
-      )}
+    <RichTextEditor
+      disabled={disabled}
+      value={value}
+      onChange={onChange}
+      onBlur={onSubmit}
+      id={getFieldId(column.key)}
     />
   );
 }
diff --git a/src/components/fields/ShortText/SideDrawerField.tsx b/src/components/fields/ShortText/SideDrawerField.tsx
index 5b4e899c..88674782 100644
--- a/src/components/fields/ShortText/SideDrawerField.tsx
+++ b/src/components/fields/ShortText/SideDrawerField.tsx
@@ -1,34 +1,28 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { TextField } from "@mui/material";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function ShortText({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        return (
-          <TextField
-            variant="filled"
-            fullWidth
-            margin="none"
-            onChange={onChange}
-            onBlur={onBlur}
-            value={value}
-            id={`sidedrawer-field-${column.key}`}
-            label=""
-            hiddenLabel
-            disabled={disabled}
-            inputProps={{ maxLength: column.config?.maxLength }}
-          />
-        );
-      }}
+    <TextField
+      variant="filled"
+      fullWidth
+      margin="none"
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onSubmit}
+      value={value}
+      id={getFieldId(column.key)}
+      label=""
+      hiddenLabel
+      disabled={disabled}
+      inputProps={{ maxLength: column.config?.maxLength }}
     />
   );
 }
diff --git a/src/components/fields/SingleSelect/SideDrawerField.tsx b/src/components/fields/SingleSelect/SideDrawerField.tsx
index eed5fa81..9b87401d 100644
--- a/src/components/fields/SingleSelect/SideDrawerField.tsx
+++ b/src/components/fields/SingleSelect/SideDrawerField.tsx
@@ -1,38 +1,33 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import MultiSelect from "@rowy/multiselect";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 import { sanitiseValue } from "./utils";
 
 export default function SingleSelect({
   column,
-  control,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const config = column.config ?? {};
 
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => (
-        <>
-          <MultiSelect
-            value={sanitiseValue(value)}
-            onChange={onChange}
-            options={config.options ?? []}
-            multiple={false}
-            freeText={config.freeText}
-            disabled={disabled}
-            TextFieldProps={{
-              label: "",
-              hiddenLabel: true,
-              onBlur,
-              id: `sidedrawer-field-${column.key}`,
-            }}
-          />
-        </>
-      )}
+    <MultiSelect
+      value={sanitiseValue(value)}
+      onChange={onChange}
+      options={config.options ?? []}
+      multiple={false}
+      freeText={config.freeText}
+      disabled={disabled}
+      TextFieldProps={{
+        label: "",
+        hiddenLabel: true,
+        onBlur: onSubmit,
+        id: getFieldId(column.key),
+      }}
+      onClose={onSubmit}
     />
   );
 }
diff --git a/src/components/fields/Slider/SideDrawerField.tsx b/src/components/fields/Slider/SideDrawerField.tsx
index ece70e4c..7ec19a21 100644
--- a/src/components/fields/Slider/SideDrawerField.tsx
+++ b/src/components/fields/Slider/SideDrawerField.tsx
@@ -1,12 +1,13 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Slider as MuiSlider, Stack, Typography } from "@mui/material";
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Slider({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const config: {
@@ -26,55 +27,47 @@ export default function Slider({
   };
   const { max, marks, min, unit, minLabel, maxLabel, step } = config;
 
+  const handleChange = (_: any, value: number | number[]) => {
+    onChange(value);
+  };
+
+  const getAriaValueText = (value: number) =>
+    `${value}${unit ? " " + unit : ""}`;
+
+  const getValueLabelFormat = (value: number) =>
+    `${value}${unit ? " " + unit : ""}`;
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        const handleChange = (_: any, value: number | number[]) => {
-          onChange(value);
-          onBlur();
-        };
+    <Stack
+      direction="row"
+      spacing={2}
+      alignItems="center"
+      sx={fieldSx}
+      style={{ paddingTop: 0, paddingBottom: 0 }}
+    >
+      <Typography variant="button" component="span" color="textSecondary">
+        {minLabel ?? `${min}${unit ? " " + unit : ""}`}
+      </Typography>
 
-        const getAriaValueText = (value: number) =>
-          `${value}${unit ? " " + unit : ""}`;
+      <MuiSlider
+        valueLabelDisplay="on"
+        min={min}
+        max={max}
+        marks={marks}
+        step={step ?? 1}
+        getAriaValueText={getAriaValueText}
+        valueLabelFormat={getValueLabelFormat}
+        value={value ?? min}
+        onChange={handleChange}
+        onBlur={onSubmit}
+        disabled={disabled}
+        id={getFieldId(column.key)}
+        style={{ display: "block", flexGrow: 1 }}
+      />
 
-        const getValueLabelFormat = (value: number) =>
-          `${value}${unit ? " " + unit : ""}`;
-
-        return (
-          <Stack
-            direction="row"
-            spacing={2}
-            alignItems="center"
-            sx={fieldSx}
-            style={{ paddingTop: 0, paddingBottom: 0 }}
-          >
-            <Typography variant="button" component="span" color="textSecondary">
-              {minLabel ?? `${min}${unit ? " " + unit : ""}`}
-            </Typography>
-
-            <MuiSlider
-              valueLabelDisplay="on"
-              min={min}
-              max={max}
-              marks={marks}
-              step={step ?? 1}
-              getAriaValueText={getAriaValueText}
-              valueLabelFormat={getValueLabelFormat}
-              value={value ?? min}
-              onClick={onBlur}
-              onChange={handleChange}
-              disabled={disabled}
-              style={{ display: "block", flexGrow: 1 }}
-            />
-
-            <Typography variant="button" component="span" color="textSecondary">
-              {maxLabel ?? `${max}${unit ? " " + unit : ""}`}
-            </Typography>
-          </Stack>
-        );
-      }}
-    />
+      <Typography variant="button" component="span" color="textSecondary">
+        {maxLabel ?? `${max}${unit ? " " + unit : ""}`}
+      </Typography>
+    </Stack>
   );
 }
diff --git a/src/components/fields/Status/SideDrawerField.tsx b/src/components/fields/Status/SideDrawerField.tsx
index 102d3ce5..3a26b773 100644
--- a/src/components/fields/Status/SideDrawerField.tsx
+++ b/src/components/fields/Status/SideDrawerField.tsx
@@ -1,37 +1,34 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import MultiSelect from "@rowy/multiselect";
+
 import getLabel from "./utils/getLabelHelper";
+import { getFieldId } from "@src/components/SideDrawer/utils";
 
 export default function Status({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const config = column.config ?? {};
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => (
-        <>
-          <MultiSelect
-            value={getLabel(value, config?.conditions)}
-            onChange={onChange}
-            options={config?.conditions ?? []}
-            multiple={false}
-            freeText={config?.freeText}
-            disabled={disabled}
-            TextFieldProps={{
-              label: "",
-              hiddenLabel: true,
-              onBlur,
-              id: `sidedrawer-field-${column.key}`,
-            }}
-          />
-        </>
-      )}
+    <MultiSelect
+      value={getLabel(value, config?.conditions)}
+      onChange={onChange}
+      options={config?.conditions ?? []}
+      multiple={false}
+      freeText={config?.freeText}
+      disabled={disabled}
+      TextFieldProps={{
+        label: "",
+        hiddenLabel: true,
+        onBlur: onSubmit,
+        id: getFieldId(column.key),
+      }}
+      onClose={onSubmit}
     />
   );
 }
diff --git a/src/components/fields/SubTable/SideDrawerField.tsx b/src/components/fields/SubTable/SideDrawerField.tsx
index e85292d5..32f2b1f8 100644
--- a/src/components/fields/SubTable/SideDrawerField.tsx
+++ b/src/components/fields/SubTable/SideDrawerField.tsx
@@ -1,27 +1,39 @@
-import { useWatch } from "react-hook-form";
+import { useMemo } from "react";
+import { useAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { find, isEqual } from "lodash-es";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { Link } from "react-router-dom";
 
 import { Box, Stack, IconButton } from "@mui/material";
 import LaunchIcon from "@mui/icons-material/Launch";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
+import { tableScope, tableRowsAtom } from "@src/atoms/tableScope";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { useSubTableData } from "./utils";
 
-export default function SubTable({
-  column,
-  control,
-  docRef,
-}: ISideDrawerFieldProps) {
-  const row = useWatch({ control });
+export default function SubTable({ column, _rowy_ref }: ISideDrawerFieldProps) {
+  const [row] = useAtom(
+    useMemo(
+      () =>
+        selectAtom(
+          tableRowsAtom,
+          (tableRows) => find(tableRows, ["_rowy_ref.path", _rowy_ref.path]),
+          isEqual
+        ),
+      [_rowy_ref.path]
+    ),
+    tableScope
+  );
+
   const { documentCount, label, subTablePath } = useSubTableData(
     column as any,
     row as any,
-    docRef
+    _rowy_ref
   );
 
   return (
-    <Stack direction="row">
+    <Stack direction="row" id={getFieldId(column.key)}>
       <Box sx={fieldSx}>
         {documentCount} {column.name as string}: {label}
       </Box>
diff --git a/src/components/fields/UpdatedAt/SideDrawerField.tsx b/src/components/fields/UpdatedAt/SideDrawerField.tsx
index e7c32d0d..8f922ccd 100644
--- a/src/components/fields/UpdatedAt/SideDrawerField.tsx
+++ b/src/components/fields/UpdatedAt/SideDrawerField.tsx
@@ -1,5 +1,3 @@
-import { useWatch } from "react-hook-form";
-import { useAtom } from "jotai";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box } from "@mui/material";
@@ -7,19 +5,12 @@ import { fieldSx } from "@src/components/SideDrawer/utils";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
 
-export default function UpdatedAt({ control, column }: ISideDrawerFieldProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = useWatch({
-    control,
-    name: tableSettings.auditFieldUpdatedBy || "_updatedBy",
-  });
-
-  if (!value || !value.timestamp) return <Box sx={fieldSx} />;
+export default function UpdatedAt({ column, value }: ISideDrawerFieldProps) {
+  if (!value) return <Box sx={fieldSx} />;
 
   const dateLabel = format(
-    value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
+    value.toDate ? value.toDate() : value,
     column.config?.format || DATE_TIME_FORMAT
   );
 
diff --git a/src/components/fields/UpdatedAt/TableCell.tsx b/src/components/fields/UpdatedAt/TableCell.tsx
index 71ae28c8..52417bce 100644
--- a/src/components/fields/UpdatedAt/TableCell.tsx
+++ b/src/components/fields/UpdatedAt/TableCell.tsx
@@ -1,17 +1,12 @@
-import { useAtom } from "jotai";
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
 
-export default function UpdatedBy({ row, column }: IHeavyCellProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = row[tableSettings.auditFieldUpdatedBy || "_updatedBy"];
-
-  if (!value || !value.timestamp) return null;
+export default function UpdatedAt({ column, value }: IHeavyCellProps) {
+  if (!value) return null;
   const dateLabel = format(
-    value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
+    value.toDate ? value.toDate() : value,
     column.config?.format || DATE_TIME_FORMAT
   );
 
diff --git a/src/components/fields/UpdatedBy/SideDrawerField.tsx b/src/components/fields/UpdatedBy/SideDrawerField.tsx
index b56cd2d2..8522e3d3 100644
--- a/src/components/fields/UpdatedBy/SideDrawerField.tsx
+++ b/src/components/fields/UpdatedBy/SideDrawerField.tsx
@@ -1,5 +1,3 @@
-import { useWatch } from "react-hook-form";
-import { useAtom } from "jotai";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box, Stack, Typography, Avatar } from "@mui/material";
@@ -7,15 +5,8 @@ import { fieldSx } from "@src/components/SideDrawer/utils";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
-
-export default function UpdatedBy({ control, column }: ISideDrawerFieldProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = useWatch({
-    control,
-    name: tableSettings.auditFieldUpdatedBy || "_updatedBy",
-  });
 
+export default function UpdatedBy({ column, value }: ISideDrawerFieldProps) {
   if (!value || !value.displayName || !value.timestamp)
     return <Box sx={fieldSx} />;
 
diff --git a/src/components/fields/UpdatedBy/TableCell.tsx b/src/components/fields/UpdatedBy/TableCell.tsx
index eb2e772a..5484626f 100644
--- a/src/components/fields/UpdatedBy/TableCell.tsx
+++ b/src/components/fields/UpdatedBy/TableCell.tsx
@@ -1,16 +1,11 @@
-import { useAtom } from "jotai";
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { Tooltip, Stack, Avatar } from "@mui/material";
 
 import { format } from "date-fns";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
-
-export default function UpdatedBy({ row, column }: IHeavyCellProps) {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const value = row[tableSettings.auditFieldUpdatedBy || "_updatedBy"];
 
+export default function UpdatedBy({ column, value }: IHeavyCellProps) {
   if (!value || !value.displayName || !value.timestamp) return null;
   const dateLabel = format(
     value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
diff --git a/src/components/fields/Url/SideDrawerField.tsx b/src/components/fields/Url/SideDrawerField.tsx
index 679a8d6f..c9efbb75 100644
--- a/src/components/fields/Url/SideDrawerField.tsx
+++ b/src/components/fields/Url/SideDrawerField.tsx
@@ -1,53 +1,49 @@
-import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Stack, TextField, IconButton } from "@mui/material";
 import LaunchIcon from "@mui/icons-material/Launch";
 
+import { getFieldId } from "@src/components/SideDrawer/utils";
+
 export default function Url({
-  control,
   column,
+  value,
+  onChange,
+  onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { onChange, onBlur, value } }) => {
-        return (
-          <Stack direction="row">
-            <TextField
-              variant="filled"
-              fullWidth
-              margin="none"
-              onChange={onChange}
-              onBlur={onBlur}
-              value={value}
-              id={`sidedrawer-field-${column.key}`}
-              label=""
-              hiddenLabel
-              disabled={disabled}
-              type="url"
-            />
+    <Stack direction="row">
+      <TextField
+        variant="filled"
+        fullWidth
+        margin="none"
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onSubmit}
+        value={value}
+        id={getFieldId(column.key)}
+        label=""
+        hiddenLabel
+        disabled={disabled}
+        type="url"
+      />
 
-            <IconButton
-              size="small"
-              href={
-                typeof value !== "string" || value.includes("http")
-                  ? value
-                  : `https://${value}`
-              }
-              target="_blank"
-              rel="noopener noreferrer"
-              disabled={!value || typeof value !== "string"}
-              edge="end"
-              sx={{ ml: 1 }}
-            >
-              <LaunchIcon />
-            </IconButton>
-          </Stack>
-        );
-      }}
-    />
+      <IconButton
+        size="small"
+        href={
+          typeof value !== "string" || value.includes("http")
+            ? value
+            : `https://${value}`
+        }
+        target="_blank"
+        rel="noopener noreferrer"
+        disabled={!value || typeof value !== "string"}
+        edge="end"
+        sx={{ ml: 1 }}
+        aria-label="Open in new tab"
+      >
+        <LaunchIcon />
+      </IconButton>
+    </Stack>
   );
 }
diff --git a/src/components/fields/Url/TableCell.tsx b/src/components/fields/Url/TableCell.tsx
index 02b66b5d..6c8affc3 100644
--- a/src/components/fields/Url/TableCell.tsx
+++ b/src/components/fields/Url/TableCell.tsx
@@ -25,6 +25,7 @@ export default function Url({ value }: IBasicCellProps) {
         className="row-hover-iconButton"
         size="small"
         style={{ flexShrink: 0 }}
+        aria-label="Open in new tab"
       >
         <LaunchIcon />
       </IconButton>
diff --git a/src/components/fields/User/SideDrawerField.tsx b/src/components/fields/User/SideDrawerField.tsx
index 9e76183a..1c21792a 100644
--- a/src/components/fields/User/SideDrawerField.tsx
+++ b/src/components/fields/User/SideDrawerField.tsx
@@ -1,57 +1,50 @@
-import { Controller } from "react-hook-form";
+import { format } from "date-fns";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box, Stack, Typography, Avatar } from "@mui/material";
-import { fieldSx } from "@src/components/SideDrawer/utils";
 
-import { format } from "date-fns";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
 
-export default function User({ control, column }: ISideDrawerFieldProps) {
+export default function User({
+  column,
+  _rowy_ref,
+  value,
+  onDirty,
+  onChange,
+  onSubmit,
+  disabled,
+}: ISideDrawerFieldProps) {
+  if (!value || !value.displayName || !value.timestamp)
+    return <Box sx={fieldSx} />;
+
+  const dateLabel = value.timestamp
+    ? format(
+        value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
+        column.config?.format || DATE_TIME_FORMAT
+      )
+    : null;
+
   return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ field: { value } }) => {
-        if (!value || !value.displayName || !value.timestamp)
-          return <Box sx={fieldSx} />;
+    <Stack direction="row" sx={fieldSx} id={getFieldId(column.key)}>
+      <Avatar
+        alt="Avatar"
+        src={value.photoURL}
+        sx={{ width: 32, height: 32, ml: -0.5, mr: 1.5, my: 0.5 }}
+      />
 
-        const dateLabel = value.timestamp
-          ? format(
-              value.timestamp.toDate
-                ? value.timestamp.toDate()
-                : value.timestamp,
-              column.config?.format || DATE_TIME_FORMAT
-            )
-          : null;
-
-        return (
-          <Stack direction="row" sx={fieldSx}>
-            <Avatar
-              alt="Avatar"
-              src={value.photoURL}
-              sx={{ width: 32, height: 32, ml: -0.5, mr: 1.5, my: 0.5 }}
-            />
-
-            <Typography
-              variant="body2"
-              component="div"
-              style={{ whiteSpace: "normal" }}
-            >
-              {value.displayName} ({value.email})
-              {dateLabel && (
-                <Typography
-                  variant="caption"
-                  color="textSecondary"
-                  component="div"
-                >
-                  {dateLabel}
-                </Typography>
-              )}
-            </Typography>
-          </Stack>
-        );
-      }}
-    />
+      <Typography
+        variant="body2"
+        component="div"
+        style={{ whiteSpace: "normal" }}
+      >
+        {value.displayName} ({value.email})
+        {dateLabel && (
+          <Typography variant="caption" color="textSecondary" component="div">
+            {dateLabel}
+          </Typography>
+        )}
+      </Typography>
+    </Stack>
   );
 }
diff --git a/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx b/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx
index cd541c5c..fe0b2bdf 100644
--- a/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx
+++ b/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx
@@ -2,7 +2,7 @@ import { useAtom, useSetAtom } from "jotai";
 import { get } from "lodash-es";
 
 import Cut from "@mui/icons-material/ContentCut";
-import { Copy as CopyCells } from "@src/assets/icons";
+import { CopyCells } from "@src/assets/icons";
 import Paste from "@mui/icons-material/ContentPaste";
 
 import {
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index 8bb080fd..f231b12d 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -61,15 +61,29 @@ export interface IPopoverCellProps extends IPopoverInlineCellProps {
   parentRef: PopoverProps["anchorEl"];
 }
 
+/** Props to be passed to all SideDrawerFields */
 export interface ISideDrawerFieldProps {
+  /** The column config */
   column: FormatterProps<TableRow>["column"] & ColumnConfig;
-  control: Control;
-  docRef: TableRowRef;
+  /** The row’s _rowy_ref object */
+  _rowy_ref: TableRowRef;
+
+  /** The field’s local value – synced with db when field is not dirty */
+  value: any;
+  /** Call when the user has input but changes have not been saved */
+  onDirty: () => void;
+  /** Update the local value. Also calls onDirty */
+  onChange: (value: any) => void;
+  /** Call when user input is ready to be saved (e.g. onBlur) */
+  onSubmit: () => void;
+
+  /** Field locked. Do NOT check `column.locked` */
   disabled: boolean;
 
-  value: any;
-  onSubmit: (value: any) => void;
-
+  /** @deprecated */
+  docRef: TableRowRef;
+  /** @deprecated */
+  control: Control;
   /** @deprecated */
   useFormMethods: UseFormReturn;
 }
diff --git a/src/hooks/useFirebaseStorageUploader.tsx b/src/hooks/useFirebaseStorageUploader.tsx
index 5e873dc0..b4dd0d5b 100644
--- a/src/hooks/useFirebaseStorageUploader.tsx
+++ b/src/hooks/useFirebaseStorageUploader.tsx
@@ -140,7 +140,7 @@ const useFirebaseStorageUploader = () => {
           getDownloadURL(uploadTask.snapshot.ref).then(
             (downloadURL: string) => {
               const newValue: FileValue[] = Array.isArray(previousValue)
-                ? previousValue
+                ? [...previousValue]
                 : [];
 
               newValue.push({
diff --git a/src/index.tsx b/src/index.tsx
index 5d545f47..f4d7b2c9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,11 +8,11 @@ import reportWebVitals from "./reportWebVitals";
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 root.render(
-  <StrictMode>
-    <Providers>
-      <App />
-    </Providers>
-  </StrictMode>
+  // <StrictMode>
+  <Providers>
+    <App />
+  </Providers>
+  // </StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 15186ce9..74fff8ac 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1276,6 +1276,10 @@ export const components = (theme: Theme): ThemeOptions => {
       MuiRating: {
         styleOverrides: {
           iconFilled: { color: theme.palette.text.secondary },
+          icon: {
+            // https://github.com/mui/material-ui/issues/32557
+            "& .MuiSvgIcon-root": { pointerEvents: "auto" },
+          },
         },
       },
 
diff --git a/yarn.lock b/yarn.lock
index 07645aba..05fc54b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2895,10 +2895,24 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-"@mui/icons-material@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.6.0.tgz#bce757f7c7a8eb31b238311a15fa0a0bcdf9ec39"
-  integrity sha512-2GDGt+/BbwM3oVkF84b9FFKQdQ9TxBJIRnTwT99vO2mimdfJaojxMRB2lkysm9tUY4HOf0yoU6O//X6GTC0Zhw==
+"@mui/base@5.0.0-alpha.83":
+  version "5.0.0-alpha.83"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.83.tgz#8ac60dc7315f8ae001233e8e10398e31833625bd"
+  integrity sha512-/bFcjiI36R2Epf2Y3BkZOIdxrz5uMLqOU4cRai4igJ8DHTRMZDeKbOff0SdvwJNwg8r6oPUyoeOpsWkaOOX9/g==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    "@popperjs/core" "^2.11.5"
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+    react-is "^17.0.2"
+
+"@mui/icons-material@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.2.tgz#211ac2a041ece952749d39c3c26071226993be14"
+  integrity sha512-fP6KUCCZZjc2rdbMSmkNmBHDskLkmP0uCox57cbVXvomU6BOPrCxnr5YXsSsQrZB8fchx7hfH0bkAgvMZ5KM0Q==
   dependencies:
     "@babel/runtime" "^7.17.2"
 
@@ -2918,21 +2932,21 @@
     react-transition-group "^4.4.2"
     rifm "^0.12.1"
 
-"@mui/material@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.6.0.tgz#284270f5e48d379a9b9bc4db412a807b807965b5"
-  integrity sha512-yh4FoRRPTgJWjv1oIu3YuvfYGD/WOEnyGizQ9fKs+hlMjIc0rzFpyUCo++P/3BUd0/hRKcI8D8mrpJK9OiOy1g==
+"@mui/material@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.2.tgz#13547df6bb6991e064f42ee71ce17c30629e263a"
+  integrity sha512-w/A1KG9Czf42uTyJOiRU5U1VullOz1R3xcsBvv3BtKCCWdVP+D6v/Yb8v0tJpIixMEbjeWzWGjotQBU0nd+yNA==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/base" "5.0.0-alpha.75"
-    "@mui/system" "^5.6.0"
+    "@mui/base" "5.0.0-alpha.83"
+    "@mui/system" "^5.8.2"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.6.0"
+    "@mui/utils" "^5.8.0"
     "@types/react-transition-group" "^4.4.4"
     clsx "^1.1.1"
-    csstype "^3.0.11"
+    csstype "^3.1.0"
     hoist-non-react-statics "^3.3.2"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     react-is "^17.0.2"
     react-transition-group "^4.4.2"
 
@@ -2945,14 +2959,14 @@
     "@mui/utils" "^5.6.0"
     prop-types "^15.7.2"
 
-"@mui/private-theming@^5.6.2":
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.6.2.tgz#c42da32f8b9481ba12885176c0168a355727c189"
-  integrity sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg==
+"@mui/private-theming@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.8.0.tgz#7d927e7e12616dc10b0dcbe665df2c00ed859796"
+  integrity sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/utils" "^5.6.1"
-    prop-types "^15.7.2"
+    "@mui/utils" "^5.8.0"
+    prop-types "^15.8.1"
 
 "@mui/styled-engine@^5.6.0":
   version "5.6.0"
@@ -2963,16 +2977,25 @@
     "@emotion/cache" "^11.7.1"
     prop-types "^15.7.2"
 
-"@mui/styles@^5.6.2":
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.6.2.tgz#6338f49cb55ae0b5052ff8fddeedf40a45cec815"
-  integrity sha512-QxEP5BUJALljOm7GHi3FF5hUy41EvrYWy5DerVjwggi8g4j4RnFG6Ak+EKsfJhrLLZoBdOyvNSoBn3o3B3dCsA==
+"@mui/styled-engine@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz#89ed42efe7c8749e5a60af035bc5d3a6bea362bf"
+  integrity sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/cache" "^11.7.1"
+    prop-types "^15.8.1"
+
+"@mui/styles@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.8.0.tgz#43ac26adaf30e911c97b71d60c536d55398d4993"
+  integrity sha512-kssqBWhCFo7AMiu93QziR8qxq3z8bJm2qCYdmNadE5NvEla7Xwu3twNJUWnCEoeDeoFMk/2H0ACMOdrasI9ANw==
   dependencies:
     "@babel/runtime" "^7.17.2"
     "@emotion/hash" "^0.8.0"
-    "@mui/private-theming" "^5.6.2"
+    "@mui/private-theming" "^5.8.0"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.6.1"
+    "@mui/utils" "^5.8.0"
     clsx "^1.1.1"
     csstype "^3.0.11"
     hoist-non-react-statics "^3.3.2"
@@ -2984,7 +3007,7 @@
     jss-plugin-props-sort "^10.8.2"
     jss-plugin-rule-value-function "^10.8.2"
     jss-plugin-vendor-prefixer "^10.8.2"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
 
 "@mui/system@^5.6.0":
   version "5.6.0"
@@ -3000,6 +3023,20 @@
     csstype "^3.0.11"
     prop-types "^15.7.2"
 
+"@mui/system@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.8.2.tgz#b6d889051caec1efe31a87f0bb96d52f003e517d"
+  integrity sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.8.0"
+    "@mui/styled-engine" "^5.8.0"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    clsx "^1.1.1"
+    csstype "^3.1.0"
+    prop-types "^15.8.1"
+
 "@mui/types@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a"
@@ -3016,18 +3053,7 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-"@mui/utils@^5.6.1":
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.6.1.tgz#4ab79a21bd481555d9a588f4b18061b3c28ea5db"
-  integrity sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ==
-  dependencies:
-    "@babel/runtime" "^7.17.2"
-    "@types/prop-types" "^15.7.4"
-    "@types/react-is" "^16.7.1 || ^17.0.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-
-"@mui/utils@^5.7.0":
+"@mui/utils@^5.7.0", "@mui/utils@^5.8.0":
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.8.0.tgz#4b1d19cbcf70773283375e763b7b3552b84cb58f"
   integrity sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==
@@ -3105,7 +3131,7 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.11.4":
+"@popperjs/core@^2.11.4", "@popperjs/core@^2.11.5":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@@ -5751,6 +5777,11 @@ csstype@^3.0.11, csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
   integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
 
+csstype@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+
 csv-parse@^5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-5.0.4.tgz#97e5e654413bcf95f2714ce09bcb2be6de0eb8e3"