More Redo/Undo and Reload button tweaks (#9013)

Author: franknoirot

src/components/CustomIcon.tsx

@@ -76,6 +76,21 @@ const CustomIconMap = Object.freeze({
       />
     </svg>
   ),
+  arrowRotateFullRight: (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="arrow rotate right"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.6777 4.76126C10.4784 4.37716 9.18277 4.41676 8.00879 4.87259C6.83489 5.32851 5.85238 6.1743 5.22656 7.26712C4.601 8.35996 4.3693 9.63537 4.57031 10.8784C4.77154 12.1216 5.39368 13.2583 6.33203 14.0982C7.27064 14.9381 8.46951 15.4303 9.72754 15.4927C10.9855 15.5551 12.227 15.1838 13.2441 14.4409L12.9492 14.0376L12.6543 13.6333C11.8222 14.2411 10.8065 14.5447 9.77734 14.4937C8.74807 14.4426 7.76697 14.0403 6.99902 13.3531C6.23119 12.6658 5.7222 11.7355 5.55762 10.7183C5.39315 9.7011 5.58273 8.65743 6.09473 7.76321C6.60681 6.86915 7.41062 6.17719 8.37109 5.80423C9.33165 5.43132 10.3918 5.40006 11.373 5.71439C12.3541 6.02873 13.1977 6.67039 13.7627 7.53177C14.206 8.20787 14.4562 8.98795 14.4941 9.78763L12.8535 8.147L12.1465 8.85403L14.9707 11.6783L15.3252 11.3326L17.8496 8.85794L17.1504 8.1431L15.4941 9.76517C15.452 8.77931 15.1459 7.81717 14.5996 6.98392C13.9089 5.93074 12.8771 5.14549 11.6777 4.76126Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   arrowRotateLeft: (
     <svg
       viewBox="0 0 20 20"
@@ -106,18 +121,18 @@ const CustomIconMap = Object.freeze({
       />
     </svg>
   ),
-  arrowShortLeft: (
+  arrowTurnLeft: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M10.8535 4.85349L6.20697 9.49997H14.9999V10.5H6.20697L10.8535 15.1465L10.1464 15.8535L4.29291 9.99997L10.1464 4.14645L10.8535 4.85349Z"
+        d="M8.56055 6.85349L5.91406 9.49997H12.207C14.4162 9.49997 16.207 11.2908 16.207 13.5H15.207C15.207 11.8431 13.8639 10.5 12.207 10.5H5.91406L8.56055 13.1465L7.85352 13.8535L4 9.99997L7.85352 6.14645L8.56055 6.85349Z"
         fill="currentColor"
       />
     </svg>
   ),
-  arrowShortRight: (
+  arrowTurnRight: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M15.7071 9.99997L9.85358 15.8535L9.14655 15.1465L13.793 10.5H5.00006V9.49997H13.793L9.14655 4.85349L9.85358 4.14645L15.7071 9.99997Z"
+        d="M16.4141 9.99997L12.5605 13.8535L11.8535 13.1465L14.5 10.5H8.20703C6.55022 10.5 5.20705 11.8432 5.20703 13.5H4.20703C4.20705 11.2909 5.99794 9.50001 8.20703 9.49997H14.5L11.8535 6.85349L12.5605 6.14645L16.4141 9.99997Z"
         fill="currentColor"
       />
     </svg>

src/components/UndoRedoButtons.tsx

@@ -17,23 +17,23 @@ export function UndoRedoButtons({
       <UndoOrRedoButton
         label="Undo"
         keyboardShortcut="mod+z"
-        iconName="arrowShortLeft"
+        iconName="arrowTurnLeft"
         onClick={() => editorManager.undo()}
         className="rounded-r-none"
         disabled={undoDepth(editorManager.editorState) === 0}
       />
       <UndoOrRedoButton
         label="Redo"
         keyboardShortcut="mod+shift+z"
-        iconName="arrowShortRight"
+        iconName="arrowTurnRight"
         onClick={() => editorManager.redo()}
         className="rounded-none"
         disabled={redoDepth(editorManager.editorState) === 0}
       />
       {/** TODO: Remove the refresh button when users don't need it so much. */}
       <UndoOrRedoButton
-        label="Refresh"
-        iconName="arrowRotateRight"
+        label="Reload"
+        iconName="arrowRotateFullRight"
         onClick={() => {
           refreshPage('Top app bar').catch(reportRejection)
         }}
@@ -47,7 +47,7 @@ export function UndoRedoButtons({
 interface UndoOrRedoButtonProps extends HTMLProps<HTMLButtonElement> {
   label: string
   onClick: MouseEventHandler
-  iconName: 'arrowShortRight' | 'arrowShortLeft' | 'arrowRotateRight'
+  iconName: 'arrowTurnRight' | 'arrowTurnLeft' | 'arrowRotateFullRight'
   keyboardShortcut?: string
   disabled: boolean
 }

src/lib/commandBarConfigs/authCommandConfig.ts

@@ -21,7 +21,7 @@ export function createAuthCommands({
     {
       groupId: ACTOR_IDS.AUTH,
       name: 'refresh',
-      displayName: 'Refresh app',
+      displayName: 'Reload app',
       description: 'Force the scene, features, and editor to reload.',
       icon: 'exclamationMark',
       needsReview: false,

src/lib/layout/configs/playwright.ts

@@ -101,12 +101,6 @@ export const playwrightLayoutConfig: Layout = {
           icon: 'printer3d',
           actionType: ActionType.Make,
         },
-        {
-          id: 'refresh',
-          label: 'Refresh app',
-          icon: 'exclamationMark',
-          actionType: ActionType.Refresh,
-        },
       ],
     },
     {

src/lib/layout/configs/textToCADFocus.ts

@@ -86,12 +86,6 @@ export const textToCADFocusConfig: Layout = {
           icon: 'printer3d',
           actionType: ActionType.Make,
         },
-        {
-          id: 'refresh',
-          label: 'Refresh app',
-          icon: 'exclamationMark',
-          actionType: ActionType.Refresh,
-        },
       ],
     },
     {

src/lib/layout/defaultActionLibrary.ts

@@ -1,5 +1,3 @@
-import { refreshPage } from '@src/lib/utils'
-import { reportRejection } from '@src/lib/trap'
 import { commandBarActor, settingsActor } from '@src/lib/singletons'
 import { useContext } from 'react'
 import { MachineManagerContext } from '@src/components/MachineManagerProvider'
@@ -45,14 +43,6 @@ export const defaultActionLibrary = Object.freeze({
       })
     },
   },
-  refreshApp: {
-    execute: () => {
-      refreshPage('Sidebar button').catch(reportRejection)
-    },
-    shortcut: undefined,
-    useDisabled: () => undefined,
-    useHidden: () => false,
-  },
   make: {
     useDisabled: () => {
       const machineManager = useContext(MachineManagerContext)

src/lib/layout/parse.test.ts

@@ -32,8 +32,8 @@ const validSplitLayout = {
 const validAction = {
   id: crypto.randomUUID(),
   label: 'Test action',
-  icon: 'refresh',
-  actionType: ActionType.Refresh,
+  icon: 'filePlus',
+  actionType: ActionType.AddFile,
 } satisfies Action
 
 const validPaneLayout = {

src/lib/layout/types.ts

@@ -42,7 +42,6 @@ export type AreaTypeDefinition = {
 export enum ActionType {
   Export = 'export',
   AddFile = 'addFileToProject',
-  Refresh = 'refreshApp',
   Make = 'make',
 }