diff --git a/apps/desktop2/src/routes/$account.home.tsx b/apps/desktop2/src/routes/$account.home.tsx
index 47e7c9d8..f23743e1 100644
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/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
("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", () => {
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
index 21f056ac..c45fcbe7 100644
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@@ -102,8 +102,9 @@ export interface LumeColumn {
}
export interface EventColumns {
- type: "add" | "remove" | "update" | "left" | "right";
+ type: "add" | "remove" | "update" | "left" | "right" | "set_title";
label?: string;
+ title?: string;
column?: LumeColumn;
}
diff --git a/packages/ui/src/column/header.tsx b/packages/ui/src/column/header.tsx
index f062771e..4163e89b 100644
--- a/packages/ui/src/column/header.tsx
+++ b/packages/ui/src/column/header.tsx
@@ -1,7 +1,8 @@
-import { CancelIcon, ExpandIcon, RefreshIcon } from "@lume/icons";
+import { CancelIcon, CheckIcon, RefreshIcon } from "@lume/icons";
import { cn } from "@lume/utils";
+import { useSearch } from "@tanstack/react-router";
import { getCurrent } from "@tauri-apps/api/window";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
export function ColumnHeader({
label,
@@ -14,6 +15,23 @@ export function ColumnHeader({
className?: string;
children?: ReactNode;
}) {
+ const search = useSearch({ strict: false });
+
+ const [title, setTitle] = useState(name);
+ const [isChanged, setIsChanged] = useState(false);
+
+ const saveNewTitle = async () => {
+ const mainWindow = getCurrent();
+ await mainWindow.emit("columns", { type: "set_title", label, title });
+
+ // update search params
+ // @ts-ignore, hahaha
+ search.name = title;
+
+ // reset state
+ setIsChanged(false);
+ };
+
const reload = () => {
window.location.reload();
};
@@ -23,6 +41,10 @@ export function ColumnHeader({
await mainWindow.emit("columns", { type: "remove", label });
};
+ useEffect(() => {
+ if (title.length !== name.length) setIsChanged(true);
+ }, [title]);
+
return (
- {!children ? (
-
{name}
- ) : (
- children
- )}
+
+ {!children ? (
+
setTitle(e.currentTarget.textContent)}
+ className="text-[13px] font-medium focus:outline-none"
+ >
+ {name}
+
+ ) : (
+ children
+ )}
+ {isChanged ? (
+
+ ) : null}
+