quadratichq · davidkircos · Sep 20, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 4, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -83,5 +83,11 @@
   },
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/quadratic-client/index.html b/quadratic-client/index.html
@@ -27,6 +27,12 @@
     <meta name="twitter:description" content="Modern spreadsheet software." />
     <meta name="twitter:image" content="https://app.quadratichq.com/images/social.png" />
 
+    <!-- Material symbols font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],400,0,0&display=block"
+      rel="stylesheet"
+    />
+
     <!-- Google Tag Manager -->
     <script>
       (function (w, d, s, l, i) {
@@ -44,6 +50,7 @@
   </head>
   <body>
     <!-- Google Tag Manager (noscript) -->
+    <!-- prettier-ignore -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVC2XPB3" crossorigin="anonymous"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->

diff --git a/quadratic-client/package.json b/quadratic-client/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.1.1",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -38,6 +39,8 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/react": "^7.108.0",
     "@sentry/vite-plugin": "^2.15.0",

diff --git a/quadratic-client/src/app/actions.ts b/quadratic-client/src/app/actions.ts
@@ -1,13 +1,8 @@
 import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
-import { sheets } from '@/app/grid/controller/Sheets';
-import { downloadFile, downloadQuadraticFile } from '@/app/helpers/downloadFileInBrowser';
-import { FileContextType } from '@/app/ui/components/FileProvider';
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { getActionFileDuplicate } from '@/routes/api.files.$uuid';
 import { apiClient } from '@/shared/api/apiClient';
 import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { ROUTES } from '@/shared/constants/routes';
-import { DOCUMENTATION_URL } from '@/shared/constants/urls';
 import { ApiTypes, FilePermission, FilePermissionSchema, TeamPermission } from 'quadratic-shared/typesAndSchemas';
 import { SubmitFunction } from 'react-router-dom';
 import { SetterOrUpdater } from 'recoil';
@@ -63,7 +58,7 @@ export const hasPermissionToEditFile = (filePermissions: FilePermission[]) => fi
 // They are shared between actions here and command palette actions
 export const isAvailableBecauseCanEditFile = ({ filePermissions }: IsAvailableArgs) =>
   hasPermissionToEditFile(filePermissions);
-const isAvailableBecauseLoggedIn = ({ isAuthenticated }: IsAvailableArgs) => isAuthenticated;
+export const isAvailableBecauseLoggedIn = ({ isAuthenticated }: IsAvailableArgs) => isAuthenticated;
 export const isAvailableBecauseFileLocationIsAccessibleAndWriteable = ({
   fileTeamPrivacy,
   teamPermissions,
@@ -77,11 +72,6 @@ export const createNewFileAction = {
   },
 };
 
-export const renameFileAction = {
-  label: 'Rename',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
 export const duplicateFileAction = {
   label: 'Duplicate',
   isAvailable: isAvailableBecauseFileLocationIsAccessibleAndWriteable,
@@ -91,14 +81,6 @@ export const duplicateFileAction = {
   },
 };
 
-export const downloadFileAction = {
-  label: 'Download',
-  isAvailable: isAvailableBecauseLoggedIn,
-  async run({ name }: { name: FileContextType['name'] }) {
-    downloadQuadraticFile(name, await quadraticCore.export());
-  },
-};
-
 export const deleteFile = {
   label: 'Delete',
   isAvailable: ({ filePermissions }: IsAvailableArgs) => filePermissions.includes(FILE_DELETE),
@@ -123,47 +105,6 @@ export const provideFeedbackAction = {
   },
 };
 
-export const viewDocsAction = {
-  label: 'Docs',
-  run() {
-    window.open(DOCUMENTATION_URL, '_blank')?.focus();
-  },
-};
-
-export const cutAction = {
-  label: 'Cut',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const pasteAction = {
-  label: 'Paste',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const pasteActionValues = {
-  label: 'Paste values only',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const pasteActionFormats = {
-  label: 'Paste formats only',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const undoAction = {
-  label: 'Undo',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const redoAction = {
-  label: 'Redo',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const copyAction = {
-  label: 'Copy',
-};
-
 export const rerunCellAction = {
   label: 'Run this code cell',
   isAvailable: isAvailableBecauseCanEditFile,
@@ -179,25 +120,11 @@ export const rerunSheetAction = {
   isAvailable: isAvailableBecauseCanEditFile,
 };
 
-export const downloadSelectionAsCsvAction = {
-  label: 'Download selection as CSV',
-  async run({ fileName }: { fileName: string }) {
-    downloadFile(fileName, await quadraticCore.exportCsvSelection(sheets.getRustSelection()), 'text/plain', 'csv');
-  },
-};
-
 export const dataValidations = {
   label: 'Data Validations',
   isAvailable: isAvailableBecauseCanEditFile,
 };
 
-export const findInSheet = {
-  label: 'Find in current sheet',
-};
-export const findInSheets = {
-  label: 'Find in all sheets',
-};
-
 export const resizeColumnAction = {
   label: 'Resize column to fit data',
   isAvailable: isAvailableBecauseCanEditFile,

diff --git a/quadratic-client/src/app/actions/actions.ts b/quadratic-client/src/app/actions/actions.ts
@@ -0,0 +1,128 @@
+export enum Action {
+  FileDownload = 'file_download',
+  FileShare = 'file_share',
+  FileRename = 'file_rename',
+  InsertCodePython = 'insert_code_python',
+  InsertCodeJavascript = 'insert_code_javascript',
+  InsertCodeFormula = 'insert_code_formula',
+  InsertSheet = 'insert_sheet',
+  InsertChartPython = 'insert_chart_python',
+  InsertChartJavascript = 'insert_chart_javascript',
+  InsertApiRequestJavascript = 'insert_api_request_javascript',
+  InsertApiRequestPython = 'insert_api_request_python',
+  InsertCheckbox = 'insert_checkbox',
+  InsertDropdown = 'insert_dropdown',
+  ToggleDataValidation = 'toggle_data_validation',
+  Copy = 'copy',
+  Cut = 'cut',
+  Paste = 'paste',
+  PasteValuesOnly = 'paste_values_only',
+  PasteFormattingOnly = 'paste_formatting_only',
+  FindInCurrentSheet = 'find_in_current_sheet',
+  FindInAllSheets = 'find_in_all_sheets',
+  HelpContactUs = 'help_contact_us',
+  HelpDocs = 'help_docs',
+  HelpFeedback = 'help_feedback',
+  FormatAlignHorizontalCenter = 'format_align_horizontal_center',
+  FormatAlignHorizontalLeft = 'format_align_horizontal_left',
+  FormatAlignHorizontalRight = 'format_align_horizontal_right',
+  FormatAlignVerticalBottom = 'format_align_vertical_bottom',
+  FormatAlignVerticalMiddle = 'format_align_vertical_middle',
+  FormatAlignVerticalTop = 'format_align_vertical_top',
+  FormatNumberAutomatic = 'format_number_automatic',
+  FormatNumberCurrency = 'format_number_currency',
+  FormatNumberDecimalDecrease = 'format_number_decimal_decrease',
+  FormatNumberDecimalIncrease = 'format_number_decimal_increase',
+  FormatNumberPercent = 'format_number_percent',
+  FormatNumberScientific = 'format_number_scientific',
+  FormatNumberToggleCommas = 'format_number_toggle_commas',
+  FormatDateTime = 'format_date_time',
+  FormatTextWrapClip = 'format_text_wrap_clip',
+  FormatTextWrapOverflow = 'format_text_wrap_overflow',
+  FormatTextWrapWrap = 'format_text_wrap_wrap',
+  FormatTextColor = 'format_text_color',
+  FormatFillColor = 'format_fill_color',
+  FormatBorderAll = 'format_border_all',
+  FormatBorderOuter = 'format_border_outer',
+  FormatBorderInner = 'format_border_inner',
+  FormatBorderVertical = 'format_border_vertical',
+  FormatBorderHorizontal = 'format_border_horizontal',
+  FormatBorderLeft = 'format_border_left',
+  FormatBorderRight = 'format_border_right',
+  FormatBorderTop = 'format_border_top',
+  FormatBorderBottom = 'format_border_bottom',
+  FormatBorderClear = 'format_border_clear',
+  FormatBorderLine1 = 'format_border_line1',
+  FormatBorderLine2 = 'format_border_line2',
+  FormatBorderLine3 = 'format_border_line3',
+  FormatBorderDashed = 'format_border_dashed',
+  FormatBorderDotted = 'format_border_dotted',
+  FormatBorderDouble = 'format_border_double',
+  FormatBorderColor = 'format_border_color',
+  GridPanMode = 'grid_pan_mode',
+  ShowCommandPalette = 'show_command_palette',
+  TogglePresentationMode = 'toggle_presentation_mode',
+  CloseOverlay = 'close_overlay',
+  ShowGoToMenu = 'show_go_to_menu',
+  ZoomIn = 'zoom_in',
+  ZoomOut = 'zoom_out',
+  ZoomToSelection = 'zoom_to_selection',
+  ZoomToFit = 'zoom_to_fit',
+  ZoomTo50 = 'zoom_to_50',
+  ZoomTo100 = 'zoom_to_100',
+  ZoomTo200 = 'zoom_to_200',
+  Save = 'save',
+  SwitchSheetNext = 'switch_sheet_next',
+  SwitchSheetPrevious = 'switch_sheet_previous',
+  ClearFormattingBorders = 'clear_formatting_borders',
+  ToggleBold = 'toggle_bold',
+  ToggleItalic = 'toggle_italic',
+  FillRight = 'fill_right',
+  FillDown = 'fill_down',
+  CancelExecution = 'cancel_execution',
+  CopyAsPng = 'copy_as_png',
+  DownloadAsCsv = 'download_as_csv',
+  Undo = 'undo',
+  Redo = 'redo',
+  SelectAll = 'select_all',
+  SelectColumn = 'select_column',
+  SelectRow = 'select_row',
+  ExecuteCode = 'execute_code',
+  RerunSheetCode = 'rerun_sheet_code',
+  RerunAllCode = 'rerun_all_code',
+  InsertCellReference = 'insert_cell_reference',
+  MoveCursorUp = 'move_cursor_up',
+  JumpCursorContentTop = 'jump_cursor_content_top',
+  ExpandSelectionUp = 'expand_selection_up',
+  ExpandSelectionContentTop = 'expand_selection_content_top',
+  MoveCursorDown = 'move_cursor_down',
+  JumpCursorContentBottom = 'jump_cursor_content_bottom',
+  ExpandSelectionDown = 'expand_selection_down',
+  ExpandSelectionContentBottom = 'expand_selection_content_bottom',
+  MoveCursorLeft = 'move_cursor_left',
+  JumpCursorContentLeft = 'jump_cursor_content_left',
+  ExpandSelectionLeft = 'expand_selection_left',
+  ExpandSelectionContentLeft = 'expand_selection_content_left',
+  MoveCursorRight = 'move_cursor_right',
+  JumpCursorContentRight = 'jump_cursor_content_right',
+  ExpandSelectionRight = 'expand_selection_right',
+  ExpandSelectionContentRight = 'expand_selection_content_right',
+  GotoA0 = 'goto_A0',
+  GotoBottomRight = 'goto_bottom_right',
+  GotoRowStart = 'goto_row_start',
+  GotoRowEnd = 'goto_row_end',
+  PageUp = 'page_up',
+  PageDown = 'page_down',
+  MoveCursorRightWithSelection = 'move_cursor_right_with_selection',
+  MoveCursorLeftWithSelection = 'move_cursor_left_with_selection',
+  EditCell = 'edit_cell',
+  DeleteCell = 'delete_cell',
+  ShowCellTypeMenu = 'show_cell_type_menu',
+  CloseInlineEditor = 'close_inline_editor',
+  SaveInlineEditor = 'save_inline_editor',
+  SaveInlineEditorMoveUp = 'save_inline_editor_move_up',
+  SaveInlineEditorMoveRight = 'save_inline_editor_move_right',
+  SaveInlineEditorMoveLeft = 'save_inline_editor_move_left',
+  RemoveInsertedCells = 'remove_inserted_cells',
+  TriggerCell = 'trigger_cell',
+}
diff --git a/quadratic-client/src/app/actions/actionsSpec.ts b/quadratic-client/src/app/actions/actionsSpec.ts
@@ -0,0 +1,53 @@
+// Note: this is a new pattern that should replace the old `actions.ts` file
+import { Action } from '@/app/actions/actions';
+import { FileActionArgs } from '@/app/actions/fileActionsSpec';
+import { FormatActionArgs } from '@/app/actions/formatActionsSpec';
+import { IconComponent } from '@/shared/components/Icons';
+import { ApiTypes, FilePermission, TeamPermission } from 'quadratic-shared/typesAndSchemas';
+
+/**
+ * Every action _may_ have an `isAvailable` key.
+ *
+ * If it doesn’t have that key, that means the action is available to any user.
+ *
+ * If it does have that key, that means that function _must_ be run to determine
+ * whether that action (and its associated shortcuts) should be available to the
+ * current user.
+ */
+export type ActionAvailabilityArgs = {
+  filePermissions: FilePermission[];
+  isAuthenticated: boolean;
+  teamPermissions: TeamPermission[] | undefined;
+  fileTeamPrivacy: ApiTypes['/v0/files/:uuid.GET.response']['userMakingRequest']['fileTeamPrivacy'];
+};
+
+/**
+ * Shared types for actions in the app that can be used across multiple locations,
+ * e.g. the sidebar, command palette, file menu, and formatting bar.
+ */
+export type ActionSpec<ActionArgsType> = {
+  label: string;
+  run: (args: ActionArgsType) => void;
+
+  // Used for contexts where we want to show a longer label
+  labelVerbose?: string;
+
+  // We make this a reference to a component, so it must be called where it's used
+  // allow us to pass additional props depending on context, e.g.
+  //
+  // ```
+  // const { Icon } = action;
+  // return `<Icon className="custom-style-class" />`
+  // ```
+  Icon?: IconComponent;
+  isAvailable?: (args: ActionAvailabilityArgs) => boolean;
+  // Used for command palette search
+  keywords?: string[];
+};
+
+export type ActionSpecRecord = {
+  [K in Action]: ActionSpec<K extends keyof ActionArgs ? ActionArgs[K] : void>;
+};
+
+// Define the possible argument types for each action
+export type ActionArgs = FileActionArgs & FormatActionArgs;