Use preact to render the tree (#155)

* Use preact to render the tree

* More changes to renderHtml

src/app/components/BtnMenu.tsx

@@ -1,7 +1,7 @@
 import type { ComponentChildren } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
 import type { Octicon } from '.'
 import { Btn } from '.'
+import { useFocus } from '../hooks'
 
 type BtnMenuProps = {
 	icon?: keyof typeof Octicon,
@@ -10,23 +10,10 @@ type BtnMenuProps = {
 	children: ComponentChildren,
 }
 export function BtnMenu({ icon, label, relative, children }: BtnMenuProps) {
-	const [active, setActive] = useState(false)
-
-	const hider = () => {
-		setActive(false)
-	}
-
-	useEffect(() => {
-		if (active) {
-			document.body.addEventListener('click', hider)
-		}
-		return () => {
-			document.body.removeEventListener('click', hider)
-		}
-	}, [active])
+	const [active, setActive] = useFocus()
 
 	return <div class={`btn-menu${relative === false ? ' no-relative' : ''}`}>
-		<Btn icon={icon} label={label} onClick={() => setActive(true)} />
+		<Btn icon={icon} label={label} onClick={setActive} />
 		{active && <div class="btn-group">
 			{children}
 		</div>}