Add mouse forward button support to navigate from Home view to Main view

Author: robertpiosik

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import styles from './Home.module.scss'
 import { Scrollable } from '@ui/components/editor/panel/Scrollable'
 import { Timeline } from '@ui/components/editor/panel/Timeline'
@@ -20,6 +20,7 @@ import { use_timeline_scroll } from './hooks/use-timeline-scroll'
 type Props = {
   vscode: any
   is_active: boolean
+  on_go_forward: () => void
   on_chatbots_click: () => void
   on_api_calls_click: () => void
   version: string
@@ -50,6 +51,17 @@ export const Home: React.FC<Props> = (props) => {
   const responses_ref = useRef<HTMLDivElement>(null)
   const mode_ref = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    const handle_mouse_up = (event: MouseEvent) => {
+      if (props.is_active && event.button == 4) {
+        props.on_go_forward()
+      }
+    }
+
+    window.addEventListener('mouseup', handle_mouse_up)
+    return () => window.removeEventListener('mouseup', handle_mouse_up)
+  }, [props.is_active, props.on_go_forward])
+
   const {
     handle_reorder,
     handle_change,

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -233,7 +233,7 @@ export const Panel = () => {
   }
 
   const are_keyboard_shortcuts_disabled =
-    !!updating_preset || !!items_to_preview
+    !!updating_preset || !!items_to_preview || active_view != 'main'
 
   return (
     <LayoutContext.Provider value={layout_context_value}>
@@ -325,6 +325,7 @@ export const Panel = () => {
               <Home
                 vscode={vscode}
                 is_active={active_view == 'home'}
+                on_go_forward={() => set_active_view('main')}
                 on_chatbots_click={() => {
                   set_active_view('main')
                   set_main_view_scroll_reset_key((k) => k + 1)