Release v4.1 (#229)

* refactor: remove custom icon packs

* fix: command not work on windows

* fix: make open_window command async

* feat: improve commands

* feat: improve

* refactor: column

* feat: improve thread column

* feat: improve

* feat: add stories column

* feat: improve

* feat: add search column

* feat: add reset password

* feat: add subscription

* refactor: settings

* chore: improve commands

* fix: crash on production

* feat: use tauri store plugin for cache

* feat: new icon

* chore: update icon for windows

* chore: improve some columns

* chore: polish code

src/components/column.tsx

@@ -1,29 +1,29 @@
-import { CheckIcon, HorizontalDotsIcon } from "@/components";
+import { commands } from "@/commands.gen";
 import type { LumeColumn } from "@/types";
+import { Check, DotsThree } from "@phosphor-icons/react";
+import { useParams } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Spinner } from "./spinner";
 
 type WindowEvent = {
 	scroll: boolean;
 	resize: boolean;
 };
 
-export const Column = memo(function Column({
-	column,
-	account,
-}: {
-	column: LumeColumn;
-	account: string;
-}) {
+export const Column = memo(function Column({ column }: { column: LumeColumn }) {
+	const params = useParams({ strict: false });
 	const container = useRef<HTMLDivElement>(null);
-	const webviewLabel = `column-${account}_${column.label}`;
+	const webviewLabel = `column-${params.account}_${column.label}`;
 
 	const [isCreated, setIsCreated] = useState(false);
 
 	const repositionWebview = useCallback(async () => {
+		if (!container.current) return;
+
 		const newRect = container.current.getBoundingClientRect();
 		await invoke("reposition_column", {
 			label: webviewLabel,
@@ -33,6 +33,8 @@ export const Column = memo(function Column({
 	}, []);
 
 	const resizeWebview = useCallback(async () => {
+		if (!container.current) return;
+
 		const newRect = container.current.getBoundingClientRect();
 		await invoke("resize_column", {
 			label: webviewLabel,
@@ -55,10 +57,10 @@ export const Column = memo(function Column({
 	}, [isCreated]);
 
 	useEffect(() => {
-		if (!container?.current) return;
+		if (!container.current) return;
 
 		const rect = container.current.getBoundingClientRect();
-		const url = `${column.content}?account=${account}&label=${column.label}&name=${column.name}`;
+		const url = `${column.url}?account=${params.account}&label=${column.label}&name=${column.name}`;
 
 		const prop = {
 			label: webviewLabel,
@@ -81,27 +83,25 @@ export const Column = memo(function Column({
 				console.log("closed: ", webviewLabel);
 			});
 		};
-	}, [account]);
+	}, [params.account]);
 
 	return (
 		<div className="h-full w-[440px] shrink-0 p-2">
-			<div className="flex flex-col w-full h-full rounded-xl bg-black/5 dark:bg-white/10">
-				<Header
-					label={column.label}
-					webview={webviewLabel}
-					name={column.name}
-				/>
-				<div ref={container} className="flex-1 w-full h-full" />
+			<div className="flex flex-col w-full h-full rounded-xl bg-black/5 dark:bg-white/15">
+				<Header label={column.label} name={column.name} />
+				<div ref={container} className="flex-1 w-full h-full">
+					{!isCreated ? (
+						<div className="size-full flex items-center justify-center">
+							<Spinner />
+						</div>
+					) : null}
+				</div>
 			</div>
 		</div>
 	);
 });
 
-function Header({
-	label,
-	webview,
-	name,
-}: { label: string; webview: string; name: string }) {
+function Header({ label, name }: { label: string; name: string }) {
 	const [title, setTitle] = useState(name);
 	const [isChanged, setIsChanged] = useState(false);
 
@@ -120,11 +120,12 @@ function Header({
 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
 		e.preventDefault();
 
+		const window = getCurrentWindow();
 		const menuItems = await Promise.all([
 			MenuItem.new({
 				text: "Reload",
 				action: async () => {
-					await invoke("reload_column", { label: webview });
+					await commands.reloadColumn(label);
 				},
 			}),
 			MenuItem.new({
@@ -135,7 +136,7 @@ function Header({
 			MenuItem.new({
 				text: "Move left",
 				action: async () => {
-					await getCurrentWindow().emit("columns", {
+					await window.emit("columns", {
 						type: "move",
 						label,
 						direction: "left",
@@ -145,7 +146,7 @@ function Header({
 			MenuItem.new({
 				text: "Move right",
 				action: async () => {
-					await getCurrentWindow().emit("columns", {
+					await window.emit("columns", {
 						type: "move",
 						label,
 						direction: "right",
@@ -156,7 +157,7 @@ function Header({
 			MenuItem.new({
 				text: "Close",
 				action: async () => {
-					await getCurrentWindow().emit("columns", {
+					await window.emit("columns", {
 						type: "remove",
 						label,
 					});
@@ -194,7 +195,7 @@ function Header({
 							onClick={() => saveNewTitle()}
 							className="text-teal-500 hover:text-teal-600"
 						>
-							<CheckIcon className="size-4" />
+							<Check className="size-4" />
 						</button>
 					) : null}
 				</div>
@@ -204,7 +205,7 @@ function Header({
 				onClick={(e) => showContextMenu(e)}
 				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10"
 			>
-				<HorizontalDotsIcon className="size-5" />
+				<DotsThree className="size-5" />
 			</button>
 		</div>
 	);