zustand part 3 (#2878)

* zustand part 3

* clean up

* yarn lock

src/routes/Home.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect } from 'react'
+import { FormEvent, useEffect, useRef } from 'react'
 import { remove } from '@tauri-apps/plugin-fs'
 import {
   getNextProjectIndex,
@@ -39,6 +39,7 @@ import {
   listProjects,
   renameProjectDirectory,
 } from 'lib/tauri'
+import { useAppState } from 'AppState'
 
 // This route only opens in the Tauri desktop context for now,
 // as defined in Router.tsx, so we can use the Tauri APIs and types.
@@ -64,6 +65,12 @@ const Home = () => {
       splitKey: '|',
     }
   )
+  const ref = useRef<HTMLDivElement>(null)
+  const { setAppState } = useAppState()
+
+  useEffect(() => {
+    setAppState({ htmlRef: ref })
+  }, [ref])
 
   const [state, send, actor] = useMachine(homeMachine, {
     context: {
@@ -198,7 +205,7 @@ const Home = () => {
   }
 
   return (
-    <div className="relative flex flex-col h-screen overflow-hidden">
+    <div className="relative flex flex-col h-screen overflow-hidden" ref={ref}>
       <AppHeader showToolbar={false} />
       <div className="w-full flex flex-col overflow-hidden max-w-5xl px-4 mx-auto mt-24 lg:px-2">
         <section>