fix toolbar rotate icons (#70)

Author: DjDeveloperr

packages/client/src/app/AppShell.tsx

@@ -2761,6 +2761,33 @@ export function AppShell({
     }, 1800);
   }
 
+  function rotateSelectedSimulator(direction: "left" | "right") {
+    if (!selectedSimulator) {
+      return;
+    }
+    if (selectedHasFixedOrientation) {
+      return;
+    }
+    const androidViewport = isAndroidSimulator(selectedSimulator);
+    const controlType = direction === "left" ? "rotateLeft" : "rotateRight";
+    const rotationDelta = direction === "left" ? -1 : 1;
+    beginZoomAnimation();
+    if (sendControl(selectedSimulator.udid, { type: controlType })) {
+      if (androidViewport) {
+        setRotationQuarterTurns(0);
+        window.setTimeout(() => {
+          void refresh();
+        }, 250);
+      } else {
+        setRotationQuarterTurns((current) =>
+          normalizeQuarterTurns(current + rotationDelta),
+        );
+      }
+      return;
+    }
+    setLocalError("Simulator control stream disconnected.");
+  }
+
   async function submitPairing(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const code = pairingCode.trim();
@@ -2889,28 +2916,8 @@ export function AppShell({
           setNewSimulatorOpen(true);
         }}
         onOpenUrlPrompt={promptForURL}
-        onRotateRight={() => {
-          if (!selectedSimulator) {
-            return;
-          }
-          if (selectedHasFixedOrientation) {
-            return;
-          }
-          const androidViewport = isAndroidSimulator(selectedSimulator);
-          beginZoomAnimation();
-          if (sendControl(selectedSimulator.udid, { type: "rotateRight" })) {
-            if (androidViewport) {
-              setRotationQuarterTurns(0);
-              window.setTimeout(() => {
-                void refresh();
-              }, 250);
-            } else {
-              setRotationQuarterTurns((current) => (current + 1) % 4);
-            }
-            return;
-          }
-          setLocalError("Simulator control stream disconnected.");
-        }}
+        onRotateLeft={() => rotateSelectedSimulator("left")}
+        onRotateRight={() => rotateSelectedSimulator("right")}
         onToggleRecording={() => {
           void toggleSimulatorRecording();
         }}

packages/client/src/features/toolbar/Toolbar.tsx

@@ -6,7 +6,7 @@ import {
   LayersIcon as HierarchyIcon,
   Link2Icon as OpenUrlIcon,
   PlayIcon,
-  ReloadIcon as RotateRightIcon,
+  RotateCounterClockwiseIcon as RotateLeftIcon,
   StopIcon,
 } from "@radix-ui/react-icons";
 import { useEffect, useState, type RefObject } from "react";
@@ -43,6 +43,7 @@ interface ToolbarProps {
   onOpenBundlePrompt: () => void;
   onOpenNewSimulator: () => void;
   onOpenUrlPrompt: () => void;
+  onRotateLeft: () => void;
   onRotateRight: () => void;
   onShutdown: () => void;
   onStreamEncoderChange: (encoder: StreamEncoder) => void;
@@ -104,6 +105,7 @@ export function Toolbar({
   onOpenBundlePrompt,
   onOpenNewSimulator,
   onOpenUrlPrompt,
+  onRotateLeft,
   onRotateRight,
   onShutdown,
   onStreamEncoderChange,
@@ -279,14 +281,24 @@ export function Toolbar({
               <AppearanceIcon />
             </button>
             {canRotateSelectedSimulator ? (
-              <button
-                aria-label="Rotate Right"
-                className="tbtn icon-btn toolbar-mobile-hidden"
-                onClick={onRotateRight}
-                title="Rotate Right"
-              >
-                <RotateRightIcon />
-              </button>
+              <>
+                <button
+                  aria-label="Rotate Left"
+                  className="tbtn icon-btn toolbar-mobile-hidden toolbar-wide-hidden"
+                  onClick={onRotateLeft}
+                  title="Rotate Left"
+                >
+                  <RotateLeftIcon />
+                </button>
+                <button
+                  aria-label="Rotate Right"
+                  className="tbtn icon-btn toolbar-mobile-hidden"
+                  onClick={onRotateRight}
+                  title="Rotate Right"
+                >
+                  <RotateLeftIcon className="rotate-right-icon" />
+                </button>
+              </>
             ) : null}
           </div>
         ) : null}

packages/client/src/styles/components.css

@@ -117,6 +117,10 @@
   height: 16px;
 }
 
+.toolbar-right .icon-btn .rotate-right-icon {
+  transform: scaleX(-1);
+}
+
 .state-dot {
   width: 6px;
   height: 6px;

packages/client/src/styles/layout.css

@@ -128,6 +128,12 @@
   min-width: 0;
 }
 
+@media (max-width: 960px) {
+  .toolbar .toolbar-wide-hidden {
+    display: none;
+  }
+}
+
 .main {
   position: relative;
   display: flex;