license key activation

apps/desktop/package.json

@@ -93,6 +93,8 @@
     "remixicon": "^4.6.0",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
+    "tauri-plugin-keygen-api": "github:bagindo/tauri-plugin-keygen#v2",
+    "tauri-plugin-keygen-rs2-api": "^0.2.3",
     "tauri-plugin-sentry-api": "^0.4.1",
     "tippy.js": "^6.3.7",
     "zod": "^3.25.46",

apps/desktop/src-tauri/Cargo.toml

@@ -58,6 +58,7 @@ tauri-plugin-dialog = { workspace = true }
 tauri-plugin-fs = { workspace = true, features = ["watch"] }
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-http = { workspace = true }
+tauri-plugin-keygen = { git = "https://github.com/bagindo/tauri-plugin-keygen", branch = "v2" }
 tauri-plugin-os = "2"
 tauri-plugin-prevent-default = { version = "1.2", features = ["unstable-windows"] }
 tauri-plugin-process = "2"

apps/desktop/src-tauri/capabilities/default.json

@@ -88,6 +88,7 @@
         { "url": "http://**" }
       ]
     },
-    "dialog:allow-save"
+    "dialog:allow-save",
+    "keygen:default"
   ]
 }

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

@@ -24,8 +24,12 @@ pub fn parse(url: String) -> Vec<Destination> {
     };
 
     let dests = match parsed_url.path() {
+        // Specified in notification related codebase
         "/notification" => parse_notification_query(&parsed_url),
+        // Specified in /apps/admin
         "/register" => parse_register_query(&parsed_url),
+        // Specified in email template
+        "/license" => parse_license_query(&parsed_url),
         _ => vec![Destination::default()],
     };
 
@@ -80,6 +84,29 @@ fn parse_register_query(parsed_url: &url::Url) -> Vec<Destination> {
     ]
 }
 
+fn parse_license_query(parsed_url: &url::Url) -> Vec<Destination> {
+    let main_url = "/app".to_string();
+
+    let settings_url = match parsed_url.query() {
+        Some(query) => match serde_qs::from_str::<LicenseQuery>(query) {
+            Ok(params) => format!("/app/settings?tab=billing&key={}", params.key),
+            Err(_) => "/app/settings".to_string(),
+        },
+        None => "/app/settings".to_string(),
+    };
+
+    vec![
+        Destination {
+            window: HyprWindow::Main,
+            url: main_url,
+        },
+        Destination {
+            window: HyprWindow::Settings,
+            url: settings_url,
+        },
+    ]
+}
+
 #[derive(serde::Serialize, serde::Deserialize)]
 struct NotificationQuery {
     event_id: Option<String>,
@@ -91,6 +118,11 @@ struct RegisterQuery {
     api_key: String,
 }
 
+#[derive(serde::Serialize, serde::Deserialize)]
+struct LicenseQuery {
+    key: String,
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -109,4 +141,16 @@ mod tests {
             "/app/register?base_url=http://localhost:3000&api_key=123"
         );
     }
+
+    #[test]
+    fn test_parse_license_query() {
+        let url = "hypr://hyprnote.com/license?key=123";
+
+        let dests = parse(url.to_string());
+        assert_eq!(dests.len(), 1);
+
+        let dest = dests.first().unwrap();
+        assert_eq!(dest.window, HyprWindow::Main);
+        assert_eq!(dest.url, "/app");
+    }
 }

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

@@ -99,6 +99,13 @@ pub async fn main() {
         .plugin(tauri_plugin_membership::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
+        .plugin(
+            tauri_plugin_keygen::Builder::new(
+                "76dfe152-397c-4689-9c5e-3669cefa34b9",
+                "13f18c98b8c1e5539d92df4aad2d51f4d203d5aead296215df7c3d6376b78b13",
+            )
+            .build(),
+        )
         .plugin(tauri_plugin_autostart::init(
             tauri_plugin_autostart::MacosLauncher::LaunchAgent,
             Some(vec![]),

apps/desktop/src/components/human-profile/past-notes.tsx

@@ -43,7 +43,7 @@ export function PastNotes({ human }: { human: Human }) {
     } else {
       const params = { to: "/app/new" } as const satisfies LinkProps;
 
-      windowsCommands.windowEmitNavigate({ type: "main" }, params.to).then(() => {
+      windowsCommands.windowEmitNavigate({ type: "main" }, { path: params.to, search: {} }).then(() => {
         windowsCommands.windowDestroy({ type: "human", value: human.id });
       });
     }

apps/desktop/src/components/left-sidebar/top-area/settings-button.tsx

@@ -1,10 +1,12 @@
 import { Trans } from "@lingui/react/macro";
+import type { LinkProps } from "@tanstack/react-router";
 import { getName, getVersion } from "@tauri-apps/api/app";
-import { CogIcon, CpuIcon } from "lucide-react";
+import { CastleIcon, CogIcon, ShieldIcon } from "lucide-react";
 import { useState } from "react";
 
 import Shortcut from "@/components/shortcut";
 import { useHypr } from "@/contexts";
+import { useLicense } from "@/hooks/use-license";
 import { openURL } from "@/utils/shell";
 import { commands as windowsCommands } from "@hypr/plugin-windows";
 import { Button } from "@hypr/ui/components/ui/button";
@@ -21,6 +23,9 @@ export function SettingsButton() {
   const [open, setOpen] = useState(false);
   const { userId } = useHypr();
 
+  const { getLicense } = useLicense();
+  const isPro = !!getLicense.data?.valid;
+
   const versionQuery = useQuery({
     queryKey: ["appVersion"],
     queryFn: async () => {
@@ -41,7 +46,13 @@ export function SettingsButton() {
 
   const handleClickPlans = () => {
     setOpen(false);
-    windowsCommands.windowShow({ type: "plans" });
+
+    windowsCommands.windowShow({ type: "settings" }).then(() => {
+      const params = { to: "/app/settings", search: { tab: "billing" } } as const satisfies LinkProps;
+      setTimeout(() => {
+        windowsCommands.windowEmitNavigate({ type: "settings" }, { path: params.to, search: params.search });
+      }, 500);
+    });
   };
 
   const handleClickChangelog = async () => {
@@ -71,27 +82,7 @@ export function SettingsButton() {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="start" className="w-52 p-0">
-        <div
-          className={cn([
-            "px-2 py-3 bg-gradient-to-r rounded-t-md relative overflow-hidden cursor-pointer",
-            "from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800",
-          ])}
-          onClick={handleClickPlans}
-        >
-          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDIwIDAgTCAwIDAgTCAwIDIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-70">
-          </div>
-          <div className="flex items-center gap-3 text-white relative z-10">
-            <CpuIcon className="size-8 animate-pulse" />
-            <div>
-              <div className="font-medium">
-                <Trans>Local mode</Trans>
-              </div>
-              <div className="text-xs text-white/80 mt-0.5">
-                Privacy-focused AI
-              </div>
-            </div>
-          </div>
-        </div>
+        <DropdownHeader handleClick={handleClickPlans} isPro={isPro} />
 
         <div className="p-1">
           <DropdownMenuItem
@@ -124,3 +115,37 @@ export function SettingsButton() {
     </DropdownMenu>
   );
 }
+
+function DropdownHeader({
+  isPro,
+  handleClick,
+}: {
+  isPro: boolean;
+  handleClick: () => void;
+}) {
+  return (
+    <div
+      onClick={handleClick}
+      className={cn([
+        "px-3 py-2 bg-gradient-to-r rounded-t-md relative overflow-hidden cursor-pointer",
+        isPro
+          ? "from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700"
+          : "from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800",
+      ])}
+    >
+      <div className="absolute inset-0 opacity-70">
+      </div>
+      <div className="flex items-center gap-3 text-white relative z-10">
+        {isPro ? <CastleIcon className="size-8 animate-pulse" /> : <ShieldIcon className="size-8 animate-pulse" />}
+        <div>
+          <div className="font-medium">
+            {isPro ? "Pro Plan" : "Free Plan"}
+          </div>
+          <div className="text-xs text-white/80 mt-0.5">
+            {isPro ? "Full features" : "Basic features"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/license.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+
+import { useLicense } from "@/hooks/use-license";
+
+export function LicenseRefreshProvider({ children }: { children: React.ReactNode }) {
+  const { shouldRefresh, refreshLicense, getLicense } = useLicense();
+
+  useEffect(() => {
+    if (getLicense.isLoading) {
+      return;
+    }
+
+    const checkAndRefresh = () => {
+      if (shouldRefresh() && !refreshLicense.isPending) {
+        refreshLicense.mutate({});
+      }
+    };
+
+    checkAndRefresh();
+    const interval = setInterval(checkAndRefresh, 1000 * 60 * 10); // 10min
+
+    return () => clearInterval(interval);
+  }, [shouldRefresh, refreshLicense, getLicense.isLoading, refreshLicense.isPending]);
+
+  return <>{children}</>;
+}

apps/desktop/src/components/right-panel/components/chat/empty-chat-state.tsx

@@ -1,8 +1,10 @@
-import { commands as windowsCommands } from "@hypr/plugin-windows";
-import { Badge } from "@hypr/ui/components/ui/badge";
 import { Trans } from "@lingui/react/macro";
+import type { LinkProps } from "@tanstack/react-router";
 import { memo, useCallback } from "react";
 
+import { commands as windowsCommands } from "@hypr/plugin-windows";
+import { Badge } from "@hypr/ui/components/ui/badge";
+
 interface EmptyChatStateProps {
   onQuickAction: (prompt: string) => void;
   onFocusInput: () => void;
@@ -20,7 +22,11 @@ export const EmptyChatState = memo(({ onQuickAction, onFocusInput }: EmptyChatSt
   const handleCustomEndpointsClick = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
     windowsCommands.windowShow({ type: "settings" }).then(() => {
-      windowsCommands.windowNavigate({ type: "settings" }, "/app/settings?tab=ai");
+      const params = { to: "/app/settings", search: { tab: "ai" } } as const satisfies LinkProps;
+
+      setTimeout(() => {
+        windowsCommands.windowEmitNavigate({ type: "settings" }, { path: params.to, search: params.search });
+      }, 500);
     });
   }, []);
 

apps/desktop/src/components/settings/components/tab-icon.tsx

@@ -3,7 +3,7 @@ import {
   BellIcon,
   BlocksIcon,
   CalendarIcon,
-  FlaskConicalIcon,
+  CreditCardIcon,
   LayoutTemplateIcon,
   MessageSquareIcon,
   SettingsIcon,
@@ -20,8 +20,6 @@ export function TabIcon({ tab }: { tab: Tab }) {
       return <BellIcon className="h-4 w-4" />;
     case "sound":
       return <AudioLinesIcon className="h-4 w-4" />;
-    case "lab":
-      return <FlaskConicalIcon className="h-4 w-4" />;
     case "feedback":
       return <MessageSquareIcon className="h-4 w-4" />;
     case "ai":
@@ -32,6 +30,8 @@ export function TabIcon({ tab }: { tab: Tab }) {
       return <LayoutTemplateIcon className="h-4 w-4" />;
     case "integrations":
       return <BlocksIcon className="h-4 w-4" />;
+    case "billing":
+      return <CreditCardIcon className="h-4 w-4" />;
     default:
       return null;
   }

apps/desktop/src/components/settings/components/types.ts

@@ -1,5 +1,15 @@
 import type { LucideIcon } from "lucide-react";
-import { Bell, Calendar, LayoutTemplate, MessageSquare, Settings, Sparkles, Volume2 } from "lucide-react";
+import {
+  Bell,
+  BlocksIcon,
+  Calendar,
+  CreditCard,
+  LayoutTemplate,
+  MessageSquare,
+  Settings,
+  Sparkles,
+  Volume2,
+} from "lucide-react";
 
 export type Tab =
   | "general"
@@ -8,9 +18,9 @@ export type Tab =
   | "notifications"
   | "sound"
   | "templates"
-  | "lab"
   | "feedback"
-  | "integrations";
+  | "integrations"
+  | "billing";
 
 export const TABS: { name: Tab; icon: LucideIcon }[] = [
   { name: "general", icon: Settings },
@@ -19,7 +29,7 @@ export const TABS: { name: Tab; icon: LucideIcon }[] = [
   { name: "notifications", icon: Bell },
   { name: "sound", icon: Volume2 },
   { name: "templates", icon: LayoutTemplate },
-  // { name: "lab", icon: FlaskConical },
   { name: "integrations", icon: MessageSquare },
-  { name: "feedback", icon: MessageSquare },
+  { name: "feedback", icon: BlocksIcon },
+  { name: "billing", icon: CreditCard },
 ];