feat: add ability change column name on the fly (#180)

Co-authored-by: reya <reya@lume.nu>

apps/desktop2/src/components/col.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { LumeColumn } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 import { Spinner } from "@lume/ui";
+import { cn } from "@lume/utils";
 
 export function Col({
   column,
@@ -83,7 +84,12 @@ export function Col({
   return (
     <div ref={container} className="h-full w-[440px] shrink-0 p-2">
       {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">
+        <div
+          className={cn(
+            "w-full h-full flex items-center justify-center rounded-xl flex-col",
+            !webview ? "bg-black/5 dark:bg-white/5 backdrop-blur-lg" : "",
+          )}
+        >
           <button type="button" className="size-5" disabled>
             <Spinner className="size-5" />
           </button>

apps/desktop2/src/routes/$account.home.tsx

@@ -89,6 +89,18 @@ function Screen() {
     });
   }, 150);
 
+  const updateName = useDebouncedCallback((label: string, title: string) => {
+    const currentColIndex = columns.findIndex((col) => col.label === label);
+
+    const updatedCol = Object.assign({}, columns[currentColIndex]);
+    updatedCol.name = title;
+
+    const newCols = columns.slice();
+    newCols[currentColIndex] = updatedCol;
+
+    setColumns(newCols);
+  }, 150);
+
   const startResize = useDebouncedCallback(
     () => setIsResize((prev) => !prev),
     150,
@@ -111,6 +123,8 @@ function Screen() {
       unlistenColEvent = await listen<EventColumns>("columns", (data) => {
         if (data.payload.type === "add") add(data.payload.column);
         if (data.payload.type === "remove") remove(data.payload.label);
+        if (data.payload.type === "set_title")
+          updateName(data.payload.label, data.payload.title);
       });
 
       unlistenWindowResize = await getCurrent().listen("tauri://resize", () => {