chore: clean up

packages/ui/package.json

@@ -22,7 +22,7 @@
 		"@tanstack/react-router": "^1.20.0",
 		"framer-motion": "^11.0.14",
 		"get-urls": "^12.1.0",
-		"media-chrome": "^2.2.5",
+		"media-chrome": "^3.0.2",
 		"minidenticons": "^4.2.1",
 		"nanoid": "^5.0.6",
 		"qrcode.react": "^3.1.0",
@@ -34,13 +34,13 @@
 		"react-hotkeys-hook": "^4.5.0",
 		"react-i18next": "^14.1.0",
 		"react-string-replace": "^1.1.1",
-		"slate": "^0.101.5",
-		"slate-react": "^0.101.6",
+		"slate": "^0.102.0",
+		"slate-react": "^0.102.0",
 		"sonner": "^1.4.3",
 		"string-strip-html": "^13.4.6",
 		"uqr": "^0.1.2",
 		"use-debounce": "^10.0.0",
-		"virtua": "^0.27.5"
+		"virtua": "^0.29.0"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",

packages/ui/src/column.tsx

@@ -7,6 +7,7 @@ import {
 import { Webview } from "@tauri-apps/api/webview";
 import { LumeColumn } from "@lume/types";
 import { useDebouncedCallback } from "use-debounce";
+import { type UnlistenFn } from "@tauri-apps/api/event";
 
 export function Column({
   column,
@@ -19,6 +20,7 @@ export function Column({
   const childWindow = useRef<Webview>(null);
   const divRef = useRef<HTMLDivElement>(null);
   const initialRect = useRef<DOMRect>(null);
+  const unlisten = useRef<UnlistenFn>(null);
   const handleResize = useDebouncedCallback(() => {
     const newRect = divRef.current.getBoundingClientRect();
     if (initialRect.current.height !== newRect.height) {
@@ -26,16 +28,12 @@ export function Column({
         new LogicalSize(newRect.width, newRect.height),
       );
     }
-  }, 800);
+  }, 500);
 
   const trackResize = useCallback(async () => {
-    const unlisten = await mainWindow.onResized(() => {
+    unlisten.current = await mainWindow.onResized(() => {
       handleResize();
     });
-
-    return () => {
-      if (unlisten) unlisten();
-    };
   }, []);
 
   useEffect(() => {
@@ -52,27 +50,27 @@ export function Column({
     if (!divRef.current) return;
     if (childWindow.current) return;
 
-    // get element dimension
     const rect = divRef.current.getBoundingClientRect();
+    const name = column.name.toLowerCase().replace(/\W/g, "");
 
     // create new webview
     initialRect.current = rect;
-    childWindow.current = new Webview(
-      mainWindow,
-      column.name.toLowerCase().replace(/\W/g, ""),
-      {
-        url: column.content,
-        x: rect.x,
-        y: rect.y,
-        width: rect.width,
-        height: rect.height,
-        transparent: true,
-        userAgent: "Lume/4.0",
-      },
-    );
+    childWindow.current = new Webview(mainWindow, name, {
+      url: column.content,
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      transparent: true,
+      userAgent: "Lume/4.0",
+    });
 
     // track window resize event
     trackResize();
+
+    return () => {
+      if (unlisten.current) unlisten.current();
+    };
   }, []);
 
   return (