v0.2.10: update notification popup on startup

On launch, fetches latest release from GitHub and shows a toast
in the bottom-right corner when a newer version is available.
Dismiss is remembered per version (localStorage) so it only
shows once per release.

Author: Omibranch

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "qnote"
-version = "0.2.9"
+version = "0.2.10"
 description = "A minimal, beautiful notepad"
 authors = ["Omi"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "qnote",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "identifier": "com.suicore.qnote",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/App.tsx

@@ -5,6 +5,7 @@ import { Editor } from "./components/Editor";
 import { Settings } from "./components/Settings";
 import { VersionHistory } from "./components/VersionHistory";
 import { DebugConsole } from "./components/DebugConsole";
+import { UpdateToast } from "./components/UpdateToast";
 import { useStore } from "./store/useStore";
 import { api } from "./lib/api";
 import { openFile, saveFile, saveFileAs } from "./lib/fileOps";
@@ -93,6 +94,7 @@ export default function App() {
       </div>
       <Settings />
       <VersionHistory />
+      <UpdateToast />
     </div>
   );
 }

src/components/UpdateToast.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { getVersion } from "@tauri-apps/api/app";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { motion, AnimatePresence } from "framer-motion";
+import { X } from "lucide-react";
+
+const DISMISS_KEY = "qnote_dismissed_update";
+const RELEASES_URL = "https://github.com/Omibranch/qnote/releases/latest";
+
+export function UpdateToast() {
+  const [installed, setInstalled] = useState("");
+  const [latest, setLatest] = useState("");
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    getVersion().then((v) => {
+      setInstalled(v);
+      fetch("https://api.github.com/repos/Omibranch/qnote/releases/latest")
+        .then((r) => r.json())
+        .then((d) => {
+          const tag = (d.tag_name as string).replace(/^v/, "");
+          if (tag !== v && localStorage.getItem(DISMISS_KEY) !== tag) {
+            setLatest(tag);
+            setVisible(true);
+          }
+        })
+        .catch(() => {});
+    });
+  }, []);
+
+  const dismiss = () => {
+    localStorage.setItem(DISMISS_KEY, latest);
+    setVisible(false);
+  };
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          className="update-toast"
+          initial={{ opacity: 0, y: 16, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 16, scale: 0.96 }}
+          transition={{ type: "spring", stiffness: 420, damping: 36 }}
+        >
+          <div className="update-toast-body">
+            <span className="update-toast-title">Update available</span>
+            <span className="update-toast-versions">{installed} → {latest}</span>
+          </div>
+          <button
+            className="update-toast-link"
+            onClick={() => openUrl(RELEASES_URL)}
+          >
+            Release notes
+          </button>
+          <button className="icon-btn update-toast-close" onClick={dismiss}>
+            <X size={14} />
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/index.css

@@ -1340,3 +1340,70 @@ body {
 .color-reset-btn:hover {
   color: var(--text-2);
 }
+
+/* Update toast */
+.update-toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 8px 10px 14px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+  max-width: 300px;
+  pointer-events: all;
+}
+
+.update-toast-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+  min-width: 0;
+}
+
+.update-toast-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.update-toast-versions {
+  font-size: 11.5px;
+  font-family: var(--font-mono);
+  color: var(--accent);
+}
+
+.update-toast-link {
+  font-size: 11.5px;
+  color: var(--accent);
+  background: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  font-family: var(--font-ui);
+  transition: background var(--t), border-color var(--t);
+  flex-shrink: 0;
+}
+
+.update-toast-link:hover {
+  background: var(--bg-elevated2);
+  border-color: var(--border-strong);
+}
+
+.update-toast-close {
+  flex-shrink: 0;
+  opacity: 0.6;
+  transition: opacity var(--t);
+}
+
+.update-toast-close:hover {
+  opacity: 1;
+}