fix: ensure `s` and `g` shortcuts work on no selection (#3800)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -156,6 +156,7 @@ import {
   getElementsWithinSelection,
   getNormalizedZoom,
   getSelectedElements,
+  hasBackground,
   isOverScrollBars,
   isSomeElementSelected,
 } from "../scene";
@@ -1582,17 +1583,22 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (event.key === KEYS.G || event.key === KEYS.S) {
-        const selectedElements = getSelectedElements(
-          this.scene.getElements(),
-          this.state,
-        );
-        if (selectedElements.length) {
-          if (event.key === KEYS.G) {
-            this.setState({ openPopup: "backgroundColorPicker" });
-          }
-          if (event.key === KEYS.S) {
-            this.setState({ openPopup: "strokeColorPicker" });
-          }
+        if (this.state.elementType === "selection") {
+          return;
+        }
+
+        if (
+          event.key === KEYS.G &&
+          (hasBackground(this.state.elementType) ||
+            getSelectedElements(
+              this.scene.getElements(),
+              this.state,
+            ).some((element) => hasBackground(element.type)))
+        ) {
+          this.setState({ openPopup: "backgroundColorPicker" });
+        }
+        if (event.key === KEYS.S) {
+          this.setState({ openPopup: "strokeColorPicker" });
         }
       }
     },

src/shapes.tsx

@@ -11,7 +11,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "selection",
-    key: [KEYS.V, KEYS.S],
+    key: KEYS.V,
   },
   {
     icon: (