feat: Add new update bubble to navigation

packages/icons/index.ts

@@ -112,3 +112,4 @@ export * from "./src/editInterest";
 export * from "./src/newColumn";
 export * from "./src/searchFilled";
 export * from "./src/arrowUp";
+export * from "./src/arrowUpSquare";

packages/icons/src/arrowUpSquare.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function ArrowUpSquareIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="2"
+				d="M8.5 11.949a20.335 20.335 0 013.604-3.807A.626.626 0 0112.5 8m4 3.949a20.334 20.334 0 00-3.604-3.807A.626.626 0 0012.5 8m0 0v8m0 5c-2.796 0-4.193 0-5.296-.457a6 6 0 01-3.247-3.247C3.5 16.194 3.5 14.796 3.5 12c0-2.796 0-4.193.457-5.296a6 6 0 013.247-3.247C8.307 3 9.704 3 12.5 3c2.796 0 4.194 0 5.296.457a6 6 0 013.247 3.247c.457 1.103.457 2.5.457 5.296 0 2.796 0 4.194-.457 5.296a6 6 0 01-3.247 3.247C16.694 21 15.296 21 12.5 21z"
+			/>
+		</svg>
+	);
+}

packages/ui/src/navigation.tsx

@@ -1,7 +1,7 @@
 import {
+	ArrowUpSquareIcon,
 	BellFilledIcon,
 	BellIcon,
-	ComposeFilledIcon,
 	DepotFilledIcon,
 	DepotIcon,
 	HomeFilledIcon,
@@ -13,7 +13,11 @@ import {
 	SettingsIcon,
 } from "@lume/icons";
 import { cn, editorAtom, searchAtom } from "@lume/utils";
+import { confirm } from "@tauri-apps/plugin-dialog";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { Update, check } from "@tauri-apps/plugin-updater";
 import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
 import { ActiveAccount } from "./account/active";
@@ -22,10 +26,33 @@ import { UnreadActivity } from "./unread";
 export function Navigation() {
 	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
 	const [search, setSearch] = useAtom(searchAtom);
+	const [update, setUpdate] = useState<Update>(null);
 
 	// shortcut for editor
 	useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
 
+	const installNewUpdate = async () => {
+		if (!update) return;
+
+		const yes = await confirm(update.body, {
+			title: `v${update.version} is available`,
+			type: "info",
+		});
+
+		if (yes) {
+			await update.downloadAndInstall();
+			await relaunch();
+		}
+	};
+
+	useEffect(() => {
+		async function checkNewUpdate() {
+			const newVersion = await check();
+			setUpdate(newVersion);
+		}
+		checkNewUpdate();
+	}, []);
+
 	return (
 		<div
 			data-tauri-drag-region
@@ -119,6 +146,20 @@ export function Navigation() {
 				</div>
 			</div>
 			<div className="flex flex-col gap-2">
+				{update ? (
+					<button
+						type="button"
+						onClick={installNewUpdate}
+						className="relative inline-flex flex-col items-center justify-center"
+					>
+						<span className="inline-flex items-center rounded-full bg-teal-500/60 ring-teal-500/80 text-teal-50 dark:bg-teal-500/10 px-2 py-1 text-xs font-semibold dark:text-teal-400 ring-1 ring-inset dark:ring-teal-500/20">
+							Update
+						</span>
+						<div className="inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl text-black/50 dark:text-neutral-400">
+							<ArrowUpSquareIcon className="size-6" />
+						</div>
+					</button>
+				) : null}
 				<button
 					type="button"
 					onClick={() => setSearch((open) => !open)}