feat: improve column management

apps/desktop2/src/components/col.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { getCurrent } from "@tauri-apps/api/window";
 import { LumeColumn } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
@@ -13,39 +13,39 @@ export function Col({
   isScroll: boolean;
 }) {
   const window = useMemo(() => getCurrent(), []);
+  const webview = useRef<string>(null);
   const container = useRef<HTMLDivElement>(null);
 
-  const [webview, setWebview] = useState<string>(null);
-
   const createWebview = async () => {
     const rect = container.current.getBoundingClientRect();
-    const name = `column-${column.name.toLowerCase().replace(/\W/g, "")}`;
-    const url = column.content + `?account=${account}&name=${column.name}`;
+    const label = `column-${column.id}`;
+    const url =
+      column.content +
+      `?account=${account}&id=${column.id}&name=${column.name}`;
 
     // create new webview
-    const label: string = await invoke("create_column", {
-      label: name,
+    webview.current = await invoke("create_column", {
+      label,
       x: rect.x,
       y: rect.y,
       width: rect.width,
       height: rect.height,
       url,
     });
-
-    setWebview(label);
   };
 
   const closeWebview = async () => {
-    if (!webview) return;
-    await invoke("close_column", {
-      label: webview,
+    const close = await invoke("close_column", {
+      label: webview.current,
     });
+    if (close) webview.current = null;
   };
 
   const repositionWebview = async () => {
+    if (!webview.current) return;
     const newRect = container.current.getBoundingClientRect();
     await invoke("reposition_column", {
-      label: webview,
+      label: webview.current,
       x: newRect.x,
       y: newRect.y,
     });
@@ -60,13 +60,14 @@ export function Col({
   useEffect(() => {
     if (!window) return;
     if (!container.current) return;
+    if (webview.current) return;
 
     // create webview for current column
     createWebview();
 
     // close webview when unmounted
     return () => {
-      closeWebview();
+      if (webview.current) closeWebview();
     };
   }, []);