New updater behaviors and UI

apps/desktop/src-tauri/src/lib.rs

@@ -156,9 +156,7 @@ pub async fn main() {
             }
 
             specta_builder.mount_events(&app_handle);
-
-            let is_existing_install = app_handle.get_onboarding_needed().is_ok();
-            app_handle.maybe_emit_updated(is_existing_install);
+            app_handle.maybe_emit_updated();
 
             Ok(())
         })

apps/desktop/src/components/changelog-listener.tsx

@@ -1,15 +1,11 @@
-import { listen } from "@tauri-apps/api/event";
+import { type UnlistenFn } from "@tauri-apps/api/event";
 import { useEffect } from "react";
 
+import { events } from "@hypr/plugin-updater2";
 import { getCurrentWebviewWindowLabel } from "@hypr/plugin-windows";
 
 import { useTabs } from "../store/zustand/tabs";
 
-interface UpdatedPayload {
-  previous: string;
-  current: string;
-}
-
 export function ChangelogListener() {
   const openNew = useTabs((state) => state.openNew);
 
@@ -18,16 +14,21 @@ export function ChangelogListener() {
       return;
     }
 
-    const unlisten = listen<UpdatedPayload>("Updated", (event) => {
-      const { previous, current } = event.payload;
-      openNew({
-        type: "changelog",
-        state: { previous, current },
+    let unlisten: null | UnlistenFn = null;
+    events.updatedEvent
+      .listen(({ payload: { previous, current } }) => {
+        openNew({
+          type: "changelog",
+          state: { previous, current },
+        });
+      })
+      .then((f) => {
+        unlisten = f;
       });
-    });
 
     return () => {
-      unlisten.then((fn) => fn());
+      unlisten?.();
+      unlisten = null;
     };
   }, [openNew]);
 

apps/desktop/src/components/main/body/changelog/index.tsx

@@ -1,7 +1,9 @@
 import { openUrl } from "@tauri-apps/plugin-opener";
-import { ExternalLinkIcon, SparklesIcon } from "lucide-react";
-
-import { Button } from "@hypr/ui/components/ui/button";
+import {
+  ExternalLinkIcon,
+  GitCompareArrowsIcon,
+  SparklesIcon,
+} from "lucide-react";
 
 import { type Tab } from "../../../../store/zustand/tabs";
 import { StandardTabWrapper } from "../index";
@@ -14,20 +16,18 @@ export const TabItemChangelog: TabItem<Extract<Tab, { type: "changelog" }>> = ({
   handleSelectThis,
   handleCloseOthers,
   handleCloseAll,
-}) => {
-  return (
-    <TabItemBase
-      icon={<SparklesIcon className="w-4 h-4" />}
-      title="What's New"
-      selected={tab.active}
-      tabIndex={tabIndex}
-      handleCloseThis={() => handleCloseThis(tab)}
-      handleSelectThis={() => handleSelectThis(tab)}
-      handleCloseOthers={handleCloseOthers}
-      handleCloseAll={handleCloseAll}
-    />
-  );
-};
+}) => (
+  <TabItemBase
+    icon={<SparklesIcon className="w-4 h-4" />}
+    title="What's New"
+    selected={tab.active}
+    tabIndex={tabIndex}
+    handleCloseThis={() => handleCloseThis(tab)}
+    handleSelectThis={() => handleSelectThis(tab)}
+    handleCloseOthers={handleCloseOthers}
+    handleCloseAll={handleCloseAll}
+  />
+);
 
 export function TabContentChangelog({
   tab,
@@ -38,29 +38,39 @@ export function TabContentChangelog({
 
   return (
     <StandardTabWrapper>
-      <div className="flex flex-col items-center justify-center h-full gap-6 p-8">
-        <div className="flex flex-col items-center gap-4 text-center max-w-md">
-          <div className="p-4 rounded-full bg-neutral-100">
-            <SparklesIcon className="w-8 h-8 text-neutral-600" />
-          </div>
-
+      <div className="flex flex-1 flex-col items-center justify-center gap-6">
+        <div className="text-center">
           <h1 className="text-2xl font-semibold text-neutral-900">
-            Welcome to v{current}
+            Updated to v{current}
           </h1>
+          {previous && (
+            <p className="mt-1 text-sm text-neutral-500">from v{previous}</p>
+          )}
+        </div>
 
-          <p className="text-neutral-600">
-            Hyprnote has been updated from v{previous} to v{current}. Check out
-            the changelog to see what's new.
-          </p>
-
-          <Button
-            variant="outline"
-            className="gap-2"
-            onClick={() => openUrl("https://hyprnote.com/changelog")}
+        <div className="flex flex-col gap-2">
+          <button
+            onClick={() =>
+              openUrl(`https://hyprnote.com/changelog/v${current}`)
+            }
+            className="flex items-center gap-3 px-4 py-2.5 text-sm text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 rounded-lg transition-colors"
           >
             <ExternalLinkIcon className="w-4 h-4" />
             View Changelog
-          </Button>
+          </button>
+          {previous && (
+            <button
+              onClick={() =>
+                openUrl(
+                  `https://github.com/fastrepl/hyprnote/compare/v${previous}...v${current}`,
+                )
+              }
+              className="flex items-center gap-3 px-4 py-2.5 text-sm text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 rounded-lg transition-colors"
+            >
+              <GitCompareArrowsIcon className="w-4 h-4" />
+              View GitHub Diff
+            </button>
+          )}
         </div>
       </div>
     </StandardTabWrapper>

apps/desktop/src/components/main/body/index.tsx

@@ -43,6 +43,7 @@ import { Search } from "./search";
 import { TabContentNote, TabItemNote } from "./sessions";
 import { TabContentSettings, TabItemSettings } from "./settings";
 import { TabContentTemplate, TabItemTemplate } from "./templates";
+import { Update } from "./update";
 
 export function Body() {
   const { tabs, currentTab } = useTabs(
@@ -198,7 +199,10 @@ function Header({ tabs }: { tabs: Tab[] }) {
           <PlusIcon size={16} />
         </Button>
 
-        <Search />
+        <div className="flex items-center gap-1">
+          <Update />
+          <Search />
+        </div>
       </div>
     </div>
   );

apps/desktop/src/components/main/body/update.tsx

@@ -0,0 +1,78 @@
+import { useQuery } from "@tanstack/react-query";
+import { type UnlistenFn } from "@tauri-apps/api/event";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { check } from "@tauri-apps/plugin-updater";
+import { useCallback, useEffect, useState } from "react";
+
+import { commands, events } from "@hypr/plugin-updater2";
+import { Button } from "@hypr/ui/components/ui/button";
+import { cn } from "@hypr/utils";
+
+export function Update() {
+  const [show, setShow] = useState(false);
+
+  const pendingUpdate = useQuery({
+    queryKey: ["pending-update"],
+    queryFn: async () => {
+      const u = await check();
+      if (!u) {
+        return false;
+      }
+
+      const v = await commands.getPendingUpdate();
+      return v.status === "ok" ? v.data : null;
+    },
+    refetchInterval: 30 * 1000,
+  });
+
+  useEffect(() => {
+    setShow(!!pendingUpdate.data);
+  }, [pendingUpdate.data]);
+
+  useEffect(() => {
+    let unlisten: null | UnlistenFn = null;
+    events.updateReadyEvent
+      .listen(({ payload: { version: _ } }) => {
+        pendingUpdate.refetch();
+      })
+      .then((f) => {
+        unlisten = f;
+      });
+
+    return () => {
+      unlisten?.();
+      unlisten = null;
+    };
+  }, []);
+
+  const handleInstallUpdate = useCallback(async () => {
+    try {
+      const u = await check();
+      if (u) {
+        await u.install();
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      await relaunch();
+    }
+  }, [check]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Button
+      size="sm"
+      onClick={handleInstallUpdate}
+      className={cn([
+        "rounded-full px-3",
+        "bg-gradient-to-t from-stone-600 to-stone-500",
+        "hover:from-stone-500 hover:to-stone-400",
+      ])}
+    >
+      Install Update
+    </Button>
+  );
+}

apps/desktop/src/store/zustand/tabs/schema.ts

@@ -124,7 +124,7 @@ export const tabSchema = z.discriminatedUnion("type", [
   baseTabSchema.extend({
     type: z.literal("changelog"),
     state: z.object({
-      previous: z.string(),
+      previous: z.string().nullable(),
       current: z.string(),
     }),
   }),
@@ -191,7 +191,7 @@ export type TabInput =
   | { type: "empty" }
   | { type: "extension"; extensionId: string; state?: Record<string, unknown> }
   | { type: "calendar" }
-  | { type: "changelog"; state: { previous: string; current: string } }
+  | { type: "changelog"; state: { previous: string | null; current: string } }
   | { type: "settings" }
   | {
       type: "ai";

apps/web/content-collections.ts

@@ -182,9 +182,10 @@ const docs = defineCollection({
     const order = orderMatch ? parseInt(orderMatch[1], 10) : 999;
 
     const cleanFileName = fileName.replace(/^\d+\./, "");
+    const filteredPathParts = pathParts.filter((part) => part !== "_");
     const cleanPath =
-      pathParts.length > 0
-        ? `${pathParts.join("/")}/${cleanFileName}`
+      filteredPathParts.length > 0
+        ? `${filteredPathParts.join("/")}/${cleanFileName}`
         : cleanFileName;
     const slug = cleanPath;
 

apps/web/content/docs/_/0.installation.mdx

@@ -0,0 +1,32 @@
+---
+title: "Installation"
+section: "Getting Started"
+description: "How to install Hyprnote on your computer."
+---
+
+# Common
+
+- All releases are always available on [GitHub Releases](https://github.com/fastrepl/hyprnote/releases).
+
+# Platforms
+
+## macOS
+
+> macOS is our main focus, especially Apple Silicon devices.
+
+```bash
+brew install --cask fastrepl/hyprnote/hyprnote@nightly
+```
+
+## Linux
+
+> Note that `Linux` version is barely usable.
+
+You can find binaries for `Linux` on the [GitHub Releases](https://github.com/fastrepl/hyprnote/releases) page, or directly download latest version from below:
+
+- [AppImage (x86_64)](https://desktop2.hyprnote.com/download/latest/appimage-x86_64?channel=nightly)
+- [Debian Package (x86_64)](https://desktop2.hyprnote.com/download/latest/deb-x86_64?channel=nightly)
+
+## Windows
+
+> Windows support is coming soon. Join our [Discord](https://discord.gg/hyprnote) to stay updated.

apps/web/content/docs/_/1.update.mdx

@@ -0,0 +1,10 @@
+---
+title: "Update"
+section: "Getting Started"
+description: "How to update Hyprnote to the latest version."
+---
+
+# Auto-updates
+
+By default, Hyprnote checks for updates and installs them automatically the next time you restart the app. 
+If an update is available, Hyprnote will download it in the background and apply it on restart.

apps/web/content/docs/_/2.uninstall.mdx

@@ -0,0 +1,11 @@
+---
+title: "Uninstall"
+section: "Getting Started"
+description: "How to uninstall Hyprnote from your computer."
+---
+
+## macOS
+
+```bash
+rm -rf ~/Library/Application\ Support/hyprnote
+```

apps/web/src/routes/_view/docs/-structure.ts

@@ -1,8 +1,9 @@
 import { allDocs } from "content-collections";
 
 export const docsStructure = {
-  sections: ["about", "developers", "pro", "faq"],
+  sections: ["getting started", "about", "developers", "pro", "faq"],
   defaultPages: {
+    "getting started": "installation",
     about: "about/hello-world",
     developers: "developers/analytics",
     pro: "pro/activation",

plugins/tray/Cargo.toml

@@ -24,6 +24,7 @@ tauri-plugin-clipboard-manager = { workspace = true }
 tauri-plugin-dialog = { workspace = true }
 tauri-plugin-misc = { workspace = true }
 tauri-plugin-updater = { workspace = true }
+tauri-plugin-updater2 = { workspace = true }
 tauri-plugin-windows = { workspace = true }
 
 serde_json = { workspace = true }