feat: auto resize mini webview when main webview resized

apps/desktop2/src/components/col.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { LumeColumn } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 import { Spinner } from "@lume/ui";
@@ -7,33 +7,50 @@ export function Col({
   column,
   account,
   isScroll,
+  isResize,
 }: {
   column: LumeColumn;
   account: string;
   isScroll: boolean;
+  isResize: boolean;
 }) {
-  const webview = useRef<string | undefined>(undefined);
   const container = useRef<HTMLDivElement>(null);
+  const [webview, setWebview] = useState<string | undefined>(undefined);
 
   const repositionWebview = async () => {
-    if (webview.current && webview.current.length > 1) {
+    if (webview && webview.length > 1) {
       const newRect = container.current.getBoundingClientRect();
       await invoke("reposition_column", {
-        label: webview.current,
+        label: webview,
         x: newRect.x,
         y: newRect.y,
       });
     }
   };
 
-  useEffect(() => {
-    if (isScroll) {
-      repositionWebview();
+  const resizeWebview = async () => {
+    if (webview && webview.length > 1) {
+      const newRect = container.current.getBoundingClientRect();
+      await invoke("resize_column", {
+        label: webview,
+        width: newRect.width,
+        height: newRect.height,
+      });
     }
+  };
+
+  useEffect(() => {
+    resizeWebview();
+  }, [isResize]);
+
+  useEffect(() => {
+    if (isScroll) repositionWebview();
   }, [isScroll]);
 
   useEffect(() => {
     (async () => {
+      if (webview && webview.length > 1) return;
+
       const rect = container.current.getBoundingClientRect();
       const windowLabel = `column-${column.label}`;
       const url =
@@ -41,7 +58,7 @@ export function Col({
         `?account=${account}&label=${column.label}&name=${column.name}`;
 
       // create new webview
-      webview.current = await invoke("create_column", {
+      const label: string = await invoke("create_column", {
         label: windowLabel,
         x: rect.x,
         y: rect.y,
@@ -49,19 +66,19 @@ export function Col({
         height: rect.height,
         url,
       });
+
+      setWebview(label);
     })();
 
     // close webview when unmounted
     return () => {
-      if (webview.current && webview.current.length > 1) {
+      if (webview && webview.length > 1) {
         invoke("close_column", {
-          label: webview.current,
-        }).then(() => {
-          webview.current = undefined;
+          label: webview,
         });
       }
     };
-  }, []);
+  }, [webview]);
 
   return (
     <div ref={container} className="h-full w-[440px] shrink-0 p-2">

apps/desktop2/src/components/repost.tsx

@@ -104,6 +104,7 @@ export function RepostNote({
                 <div className="-ml-1 inline-flex items-center gap-4">
                   <Note.Reply />
                   <Note.Repost />
+                  <Note.Pin />
                   {settings.zap ? <Note.Zap /> : null}
                 </div>
                 <Note.Menu />

apps/desktop2/src/components/text.tsx

@@ -30,6 +30,7 @@ export function TextNote({
               <div className="-ml-1 inline-flex items-center gap-4">
                 <Note.Reply />
                 <Note.Repost />
+                <Note.Pin />
                 {settings.zap ? <Note.Zap /> : null}
               </div>
               <Note.Menu />