Fix desktop Pro feature gating (#4799)

* fix: gate playback rate controls to pro

* fix: require pro for google calendar connects

* fix: clear hosted llm selection after billing expiry

* fix: gate folder features to pro

Author: ComputelessComputer

apps/desktop/src/audio-player/provider.tsx

@@ -14,6 +14,8 @@ import WaveSurfer from "wavesurfer.js";
 
 import { commands as fsSyncCommands } from "@hypr/plugin-fs-sync";
 
+import { useBillingAccess } from "~/auth/billing";
+
 type AudioPlayerState = "playing" | "paused" | "stopped";
 
 interface TimeSnapshot {
@@ -102,6 +104,7 @@ export function AudioPlayerProvider({
   children: ReactNode;
 }) {
   const queryClient = useQueryClient();
+  const { isPro } = useBillingAccess();
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
   const [state, setState] = useState<AudioPlayerState>("stopped");
@@ -257,14 +260,27 @@ export function AudioPlayerProvider({
 
   const setPlaybackRate = useCallback(
     (rate: number) => {
+      if (!isPro && rate !== 1) {
+        return;
+      }
       if (wavesurfer) {
         wavesurfer.setPlaybackRate(rate);
       }
       setPlaybackRateState(rate);
     },
-    [wavesurfer],
+    [isPro, wavesurfer],
   );
 
+  useEffect(() => {
+    if (isPro || playbackRate === 1) {
+      return;
+    }
+    if (wavesurfer) {
+      wavesurfer.setPlaybackRate(1);
+    }
+    setPlaybackRateState(1);
+  }, [isPro, playbackRate, wavesurfer]);
+
   const deleteRecordingMutation = useMutation({
     mutationFn: async () => {
       const result = await fsSyncCommands.audioDelete(sessionId);

apps/desktop/src/audio-player/timeline.tsx

@@ -5,11 +5,13 @@ import { cn } from "@hypr/utils";
 
 import { useAudioPlayer, useAudioTime } from "./provider";
 
+import { useBillingAccess } from "~/auth/billing";
 import { useNativeContextMenu } from "~/shared/hooks/useNativeContextMenu";
 
 const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 
 export function Timeline() {
+  const { isPro } = useBillingAccess();
   const {
     registerContainer,
     state,
@@ -116,49 +118,51 @@ export function Timeline() {
           <span>{formatTime(time.total)}</span>
         </div>
 
-        <div className="relative shrink-0" ref={rateMenuRef}>
-          <button
-            onClick={() => setShowRateMenu((prev) => !prev)}
-            className={cn([
-              "flex items-center justify-center",
-              "h-6 rounded-md px-1.5",
-              "border border-neutral-200 bg-white",
-              "transition-colors hover:bg-neutral-100",
-              "font-mono text-xs text-neutral-700 select-none",
-              "shadow-xs",
-            ])}
-          >
-            {playbackRate}x
-          </button>
-          {showRateMenu && (
-            <div
+        {isPro ? (
+          <div className="relative shrink-0" ref={rateMenuRef}>
+            <button
+              onClick={() => setShowRateMenu((prev) => !prev)}
               className={cn([
-                "absolute right-0 bottom-full mb-1",
-                "rounded-lg border border-neutral-200 bg-white shadow-md",
-                "z-50 py-1",
+                "flex items-center justify-center",
+                "h-6 rounded-md px-1.5",
+                "border border-neutral-200 bg-white",
+                "transition-colors hover:bg-neutral-100",
+                "font-mono text-xs text-neutral-700 select-none",
+                "shadow-xs",
               ])}
             >
-              {PLAYBACK_RATES.map((rate) => (
-                <button
-                  key={rate}
-                  onClick={() => {
-                    setPlaybackRate(rate);
-                    setShowRateMenu(false);
-                  }}
-                  className={cn([
-                    "block w-full px-3 py-1 text-left font-mono text-xs select-none",
-                    "transition-colors hover:bg-neutral-100",
-                    rate === playbackRate
-                      ? "font-semibold text-neutral-900"
-                      : "text-neutral-600",
-                  ])}
-                >
-                  {rate}x
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
+              {playbackRate}x
+            </button>
+            {showRateMenu && (
+              <div
+                className={cn([
+                  "absolute right-0 bottom-full mb-1",
+                  "rounded-lg border border-neutral-200 bg-white shadow-md",
+                  "z-50 py-1",
+                ])}
+              >
+                {PLAYBACK_RATES.map((rate) => (
+                  <button
+                    key={rate}
+                    onClick={() => {
+                      setPlaybackRate(rate);
+                      setShowRateMenu(false);
+                    }}
+                    className={cn([
+                      "block w-full px-3 py-1 text-left font-mono text-xs select-none",
+                      "transition-colors hover:bg-neutral-100",
+                      rate === playbackRate
+                        ? "font-semibold text-neutral-900"
+                        : "text-neutral-600",
+                    ])}
+                  >
+                    {rate}x
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : null}
 
         <div
           ref={registerContainer}

apps/desktop/src/auth/billing.tsx

@@ -4,6 +4,7 @@ import {
   type ReactNode,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
 } from "react";
 
@@ -21,6 +22,8 @@ import { env } from "../env";
 import { buildWebAppUrl } from "../shared/utils";
 import { useAuth } from "./context";
 
+import * as settings from "~/store/tinybase/store/settings";
+
 async function getClaimsFromToken(
   accessToken: string,
 ): Promise<SupabaseJwtPayload | null> {
@@ -49,6 +52,8 @@ const BillingContext = createContext<BillingContextValue | null>(null);
 
 export function BillingProvider({ children }: { children: ReactNode }) {
   const auth = useAuth();
+  const settingsStore = settings.UI.useStore(settings.STORE_ID);
+  const { current_llm_provider } = settings.UI.useValues(settings.STORE_ID);
 
   const claimsQuery = useQuery({
     queryKey: ["tokenInfo", auth?.session?.access_token ?? ""],
@@ -89,6 +94,25 @@ export function BillingProvider({ children }: { children: ReactNode }) {
     void openerCommands.openUrl(url, null);
   }, []);
 
+  useEffect(() => {
+    if (!auth?.session?.user.id || !isReady || billing.isPaid) {
+      return;
+    }
+
+    if (current_llm_provider !== "hyprnote") {
+      return;
+    }
+
+    settingsStore?.setValue("current_llm_provider", "");
+    settingsStore?.setValue("current_llm_model", "");
+  }, [
+    auth?.session?.user.id,
+    billing.isPaid,
+    current_llm_provider,
+    isReady,
+    settingsStore,
+  ]);
+
   const value = useMemo<BillingContextValue>(
     () => ({
       ...billing,

apps/desktop/src/calendar/components/oauth/provider-content.tsx

@@ -21,8 +21,8 @@ import { openIntegrationUrl } from "~/shared/integration";
 
 export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
   const auth = useAuth();
-  const { isPaid, upgradeToPro } = useBillingAccess();
-  const { data: connections, isError } = useConnections(isPaid);
+  const { isPro, upgradeToPro } = useBillingAccess();
+  const { data: connections, isError } = useConnections(isPro);
   const providerConnections = useMemo(
     () =>
       connections?.filter(
@@ -62,7 +62,7 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
     );
   }
 
-  if (!isPaid) {
+  if (!isPro) {
     return (
       <div className="pt-1 pb-2">
         <button

apps/desktop/src/folders/index.tsx

@@ -1,10 +1,12 @@
 import { FolderIcon, FoldersIcon, StickyNoteIcon } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 
+import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
 import { Section } from "./shared";
 
+import { useBillingAccess } from "~/auth/billing";
 import { StandardTabWrapper } from "~/shared/main";
 import { type TabItem, TabItemBase } from "~/shared/tabs";
 import {
@@ -138,10 +140,20 @@ const TabItemFolderSpecific: TabItem<Extract<Tab, { type: "folders" }>> = ({
 };
 
 export function TabContentFolder({ tab }: { tab: Tab }) {
+  const { isPro, upgradeToPro } = useBillingAccess();
+
   if (tab.type !== "folders") {
     return null;
   }
 
+  if (!isPro) {
+    return (
+      <StandardTabWrapper>
+        <FolderUpgradeState onUpgrade={upgradeToPro} />
+      </StandardTabWrapper>
+    );
+  }
+
   return (
     <StandardTabWrapper>
       {tab.id === null ? (
@@ -153,6 +165,23 @@ export function TabContentFolder({ tab }: { tab: Tab }) {
   );
 }
 
+function FolderUpgradeState({ onUpgrade }: { onUpgrade: () => void }) {
+  return (
+    <div className="flex h-full items-center justify-center p-8">
+      <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+        <FoldersIcon className="h-10 w-10 text-neutral-500" />
+        <h1 className="text-lg font-semibold text-neutral-900">
+          Folders are available on Pro
+        </h1>
+        <p className="text-sm text-neutral-600">
+          Upgrade to Pro to open folder tabs and organize notes into folders.
+        </p>
+        <Button onClick={onUpgrade}>Upgrade to Pro</Button>
+      </div>
+    </div>
+  );
+}
+
 function TabContentFolderTopLevel() {
   return (
     <div className="justify-left flex h-full items-start p-8">

apps/desktop/src/onboarding/calendar.tsx

@@ -244,8 +244,8 @@ function addIntegrationMenus({
 
 function GoogleCalendarProvider({ onSignIn }: { onSignIn: () => void }) {
   const auth = useAuth();
-  const { isPaid, isReady, upgradeToPro } = useBillingAccess();
-  const { data: connections, isPending, isError } = useConnections(isPaid);
+  const { isPro, isReady, upgradeToPro } = useBillingAccess();
+  const { data: connections, isPending, isError } = useConnections(isPro);
   const providerConnections = useMemo(
     () =>
       connections?.filter(
@@ -261,7 +261,7 @@ function GoogleCalendarProvider({ onSignIn }: { onSignIn: () => void }) {
       return;
     }
 
-    if (!isPaid) {
+    if (!isPro) {
       upgradeToPro();
       return;
     }
@@ -271,7 +271,7 @@ function GoogleCalendarProvider({ onSignIn }: { onSignIn: () => void }) {
       undefined,
       "connect",
     );
-  }, [auth.session, isPaid, onSignIn, upgradeToPro]);
+  }, [auth.session, isPro, onSignIn, upgradeToPro]);
 
   if (!GOOGLE_PROVIDER) {
     return null;

apps/desktop/src/session/components/note-input/enhanced/config-error.tsx

@@ -44,6 +44,10 @@ function getMessageForStatus(status: LLMConnectionStatus): string {
     return "You need to sign in to use Char's language model";
   }
 
+  if (status.status === "error" && status.reason === "not_pro") {
+    return "Your Char plan has expired. Configure another language model or renew your plan";
+  }
+
   if (status.status === "error" && status.reason === "missing_config") {
     const missing = status.missing;
     if (missing.includes("api_key") && missing.includes("base_url")) {

apps/desktop/src/session/components/note-input/enhanced/index.tsx

@@ -32,6 +32,7 @@ export const Enhanced = forwardRef<
     llmStatus.status === "pending" ||
     (llmStatus.status === "error" &&
       (llmStatus.reason === "missing_config" ||
+        llmStatus.reason === "not_pro" ||
         llmStatus.reason === "unauthenticated"));
 
   if (status === "idle" && isConfigError && !hasContent) {

apps/desktop/src/session/components/note-input/header.tsx

@@ -1083,6 +1083,7 @@ function useEnhanceLogic(sessionId: string, enhancedNoteId: string) {
     llmStatus.status === "pending" ||
     (llmStatus.status === "error" &&
       (llmStatus.reason === "missing_config" ||
+        llmStatus.reason === "not_pro" ||
         llmStatus.reason === "unauthenticated"));
 
   const isIdleWithConfigError = enhanceTask.isIdle && isConfigError;

apps/desktop/src/session/components/outer-header/folder/index.tsx

@@ -12,12 +12,14 @@ import { Button } from "@hypr/ui/components/ui/button";
 
 import { SearchableFolderDropdown } from "./searchable-dropdown";
 
+import { useBillingAccess } from "~/auth/billing";
 import { FolderBreadcrumb } from "~/shared/ui/folder-breadcrumb";
 import * as main from "~/store/tinybase/store/main";
 import { useSessionTitle } from "~/store/zustand/live-title";
 import { useTabs } from "~/store/zustand/tabs";
 
 export function FolderChain({ sessionId }: { sessionId: string }) {
+  const { isPro } = useBillingAccess();
   const folderId = main.UI.useCell(
     "sessions",
     sessionId,
@@ -40,6 +42,20 @@ export function FolderChain({ sessionId }: { sessionId: string }) {
     main.STORE_ID,
   );
 
+  if (!isPro) {
+    return (
+      <Breadcrumb className="ml-1.5 w-full min-w-0">
+        <BreadcrumbList className="w-full flex-nowrap gap-0.5 overflow-hidden text-xs text-neutral-700">
+          <BreadcrumbItem className="min-w-0 flex-1 overflow-hidden">
+            <BreadcrumbPage className="block w-full min-w-0">
+              <TitleInput title={title} handleChangeTitle={handleChangeTitle} />
+            </BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    );
+  }
+
   return (
     <Breadcrumb className="ml-1.5 w-full min-w-0">
       <BreadcrumbList className="w-full flex-nowrap gap-0.5 overflow-hidden text-xs text-neutral-700">