[improvement] add undo redo at all screen sizes (#643)

* Adds undo redo at all viewport sizes

* Update TopPanel.tsx

.ignore

@@ -0,0 +1,7 @@
+# Ignored Files for Search
+
+dist
+node_modules
+*.d.ts
+*.js
+*.md

packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx

@@ -101,12 +101,19 @@ const optionsSelector = (s: TDSnapshot) => {
 
 export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
   const app = useTldrawApp()
+
   const theme = app.useStore(themeSelector)
+
   const options = app.useStore(optionsSelector)
+
   const currentStyle = app.useStore(currentStyleSelector)
+
   const selectedIds = app.useStore(selectedIdsSelector)
+
   const [displayedStyle, setDisplayedStyle] = React.useState(currentStyle)
+
   const rDisplayedStyle = React.useRef(currentStyle)
+
   React.useEffect(() => {
     const {
       appState: { currentStyle },
@@ -144,27 +151,34 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
       setDisplayedStyle(commonStyle)
     }
   }, [currentStyle, selectedIds])
+
   const handleToggleFilled = React.useCallback((checked: boolean) => {
     app.style({ isFilled: checked })
   }, [])
+
   const handleDashChange = React.useCallback((value: string) => {
     app.style({ dash: value as DashStyle })
   }, [])
+
   const handleSizeChange = React.useCallback((value: string) => {
     app.style({ size: value as SizeStyle })
   }, [])
+
   const handleFontChange = React.useCallback((value: string) => {
     app.style({ font: value as FontStyle })
   }, [])
+
   const handleTextAlignChange = React.useCallback((value: string) => {
     app.style({ textAlign: value as AlignStyle })
   }, [])
+
   const handleMenuOpenChange = React.useCallback(
     (open: boolean) => {
       app.setMenuOpen(open)
     },
     [app]
   )
+
   return (
     <DropdownMenu.Root dir="ltr" onOpenChange={handleMenuOpenChange}>
       <DropdownMenu.Trigger asChild id="TD-Styles">

packages/tldraw/src/components/TopPanel/TopPanel.tsx

@@ -45,14 +45,12 @@ export function TopPanel({
       {(showStyles || showZoom) && (
         <Panel side="right">
           {showStyles && !readOnly && <StyleMenu />}
-          <MobileOnly bp={breakpoints}>
+          <ToolButton>
-            <ToolButton>
+            <UndoIcon onClick={app.undo} />
-              <UndoIcon onClick={app.undo} />
+          </ToolButton>
-            </ToolButton>
+          <ToolButton>
-            <ToolButton>
+            <RedoIcon onClick={app.redo} />
-              <RedoIcon onClick={app.redo} />
+          </ToolButton>
-            </ToolButton>
-          </MobileOnly>
           {showZoom && <ZoomMenu />}
         </Panel>
       )}
@@ -78,18 +76,3 @@ const StyledSpacer = styled('div', {
   flexGrow: 2,
   pointerEvents: 'none',
 })
-
-const MobileOnly = styled('div', {
-  display: 'flex',
-  flexDirection: 'row',
-  variants: {
-    bp: {
-      small: {
-        display: 'inherit',
-      },
-      large: {
-        display: 'none',
-      },
-    },
-  },
-})