Jump to error code on badge click (#3262)

* add function to scroll to view

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* scroll into view on click

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* add test for jump to code with error

Signed-off-by: Jess Frazelle <github@jessfraz.com>

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>

src/components/ModelingSidebar/ModelingPanes/index.ts

@@ -8,12 +8,13 @@ import {
 import { KclEditorMenu } from 'components/ModelingSidebar/ModelingPanes/KclEditorMenu'
 import { CustomIconName } from 'components/CustomIcon'
 import { KclEditorPane } from 'components/ModelingSidebar/ModelingPanes/KclEditorPane'
-import { ReactNode } from 'react'
+import { MouseEventHandler, ReactNode } from 'react'
 import { MemoryPane, MemoryPaneMenu } from './MemoryPane'
 import { LogsPane } from './LoggingPanes'
 import { DebugPane } from './DebugPane'
 import { FileTreeInner, FileTreeMenu } from 'components/FileTree'
 import { useKclContext } from 'lang/KclProvider'
+import { editorManager } from 'lib/singletons'
 
 export type SidebarType =
   | 'code'
@@ -24,6 +25,11 @@ export type SidebarType =
   | 'lspMessages'
   | 'variables'
 
+export interface BadgeInfo {
+  value: (props: PaneCallbackProps) => boolean | number
+  onClick?: MouseEventHandler<any>
+}
+
 /**
  * This interface can be extended as more context is needed for the panes
  * to determine if they should show their badges or not.
@@ -40,7 +46,7 @@ export type SidebarPane = {
   Content: ReactNode | React.FC
   Menu?: ReactNode | React.FC
   hideOnPlatform?: 'desktop' | 'web'
-  showBadge?: (props: PaneCallbackProps) => boolean | number
+  showBadge?: BadgeInfo
 }
 
 export const sidebarPanes: SidebarPane[] = [
@@ -51,7 +57,15 @@ export const sidebarPanes: SidebarPane[] = [
     Content: KclEditorPane,
     keybinding: 'Shift + C',
     Menu: KclEditorMenu,
-    showBadge: ({ kclContext }) => kclContext.errors.length,
+    showBadge: {
+      value: ({ kclContext }) => {
+        return kclContext.errors.length
+      },
+      onClick: (e) => {
+        e.preventDefault()
+        editorManager.scrollToFirstDiagnosticIfExists()
+      },
+    },
   },
   {
     id: 'files',