chore: small updates

apps/desktop2/src/components/col.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef } from "react";
 import { LumeColumn } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 import { LoaderIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
 
 export function Col({
   column,
@@ -66,18 +65,13 @@ export function Col({
 
   return (
     <div ref={container} className="h-full w-[440px] shrink-0 p-2">
-      <div
-        className={cn(
-          "w-full h-full flex items-center justify-center",
-          !webview?.current?.length
-            ? "rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg"
-            : "",
-        )}
-      >
-        <button type="button" className="size-5" disabled>
-          <LoaderIcon className="size-5 animate-spin" />
-        </button>
-      </div>
+      {column.label !== "open" ? (
+        <div className="w-full h-full flex items-center justify-center rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg">
+          <button type="button" className="size-5" disabled>
+            <LoaderIcon className="size-5 animate-spin" />
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }

apps/desktop2/src/components/toolbar.tsx

@@ -1,39 +1,15 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
-import { useEffect, useState } from "react";
+import { ReactNode } from "@tanstack/react-router";
+import { useLayoutEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
-export function Toolbar({
-  moveLeft,
-  moveRight,
-}: {
-  moveLeft: () => void;
-  moveRight: () => void;
-}) {
+export function Toolbar({ children }: { children: ReactNode }) {
   const [domReady, setDomReady] = useState(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setDomReady(true);
   }, []);
 
   return domReady
-    ? createPortal(
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => moveLeft()}
-            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
-          >
-            <ArrowLeftIcon className="size-5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => moveRight()}
-            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
-          >
-            <ArrowRightIcon className="size-5" />
-          </button>
-        </div>,
-        document.getElementById("toolbar"),
-      )
+    ? createPortal(children, document.getElementById("toolbar"))
     : null;
 }