Extract ObjectInspector toggle into component

- use SVG instead of CSS transforms to create the icon
- use layout service

Author: pichfl

app/components/object-inspector/toggle.hbs

@@ -0,0 +1,9 @@
+<button
+  class="object-inspector-toggle toolbar-icon-button"
+  type="button"
+  title="{{if this.layout.inspectorExpanded "hide" "show"}} object inspector"
+  ...attributes
+  {{on "click" this.layout.toggleInspector}}
+>
+  {{svg-jar "sidebar-toggle-trailing" width="16" height="16"}}
+</button>

app/components/object-inspector/toggle.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class PropertiesGrouped extends Component {
+  @service layout;
+}

app/styles/ui/_object-inspector-toggle.scss

@@ -1,12 +1,4 @@
 .object-inspector-toggle.toolbar-icon-button {
-  margin-right: 0; // .toolbar-icon-button override
   max-height: var(--toolbar-height);
-  padding-right: 6px; // .toolbar-icon-button override
-  padding-left: 6px; // .toolbar-icon-button override
-  transform: scaleX(-1);
-
-  // use .toolbar-icon-button active style AND flip horizontally
-  &:active {
-    transform: translate(1px, 1px) scaleX(-1);
-  }
+  padding-inline: 6px; // .toolbar-icon-button override
 }

app/templates/application.hbs

@@ -47,14 +47,7 @@
           <div class="split-panel">
             <div class="split-panel-hd">
               <div id="toolbar"></div>
-              <button
-                class="object-inspector-toggle toolbar-icon-button absolute top-0 right-0"
-                {{on "click" this.layoutService.toggleInspector}}
-                type="button"
-                title="{{if this.layoutService.inspectorExpanded "hide" "show"}} object inspector"
-              >
-                {{svg-jar "sidebar-toggle" width="16" height="16"}}
-              </button>
+              <ObjectInspector::Toggle class="align-end" />
             </div>
 
             <div class="split-panel-bd" {{did-insert this.setupContentElement}}>