Add setting to toggle scale grid visibility (#2838)

* Add a setting for showScaleGrid

* Fix up setting persistence, move under modeling

* Make the setting actually do something

* the lamest fmt I've seen in a while

* Fix clippy warnings

* Add snapshot tests for grid (first time using Playwright masks)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI after new screenshots added

---------

Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -1,6 +1,6 @@
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Resizable } from 're-resizable'
-import { useCallback, useEffect, useState } from 'react'
+import { HTMLAttributes, useCallback, useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useStore } from 'useStore'
 import { Tab } from '@headlessui/react'
@@ -56,15 +56,19 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
         bottomRight: 'hidden',
       }}
     >
-      <div className={styles.grid + ' flex-1'}>
-        <ModelingSidebarSection panes={topPanes} />
-        <ModelingSidebarSection panes={bottomPanes} alignButtons="end" />
+      <div id="app-sidebar" className={styles.grid + ' flex-1'}>
+        <ModelingSidebarSection id="sidebar-top" panes={topPanes} />
+        <ModelingSidebarSection
+          id="sidebar-bottom"
+          panes={bottomPanes}
+          alignButtons="end"
+        />
       </div>
     </Resizable>
   )
 }
 
-interface ModelingSidebarSectionProps {
+interface ModelingSidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
   panes: SidebarPane[]
   alignButtons?: 'start' | 'end'
 }
@@ -72,6 +76,8 @@ interface ModelingSidebarSectionProps {
 function ModelingSidebarSection({
   panes,
   alignButtons = 'start',
+  className,
+  ...props
 }: ModelingSidebarSectionProps) {
   const { settings } = useSettingsAuthContext()
   const showDebugPanel = settings.context.modeling.showDebugPanel
@@ -123,7 +129,7 @@ function ModelingSidebarSection({
   }, [showDebugPanel.current, togglePane, openPanes])
 
   return (
-    <div className="group contents">
+    <div className={'group contents ' + className} {...props}>
       <Tab.Group
         vertical
         selectedIndex={
@@ -135,6 +141,7 @@ function ModelingSidebarSection({
         }}
       >
         <Tab.List
+          id={`${props.id}-ribbon`}
           className={
             'pointer-events-auto ' +
             (alignButtons === 'start'
@@ -161,6 +168,7 @@ function ModelingSidebarSection({
           ))}
         </Tab.List>
         <Tab.Panels
+          id={`${props.id}-pane`}
           as="article"
           className={
             'col-start-2 col-span-1 ' +