From ebc2b7b77d91569d85975ce79031d0fc24a6075a Mon Sep 17 00:00:00 2001
From: tusharmagar <tushmag@gmail.com>
Date: Mon, 16 Mar 2026 22:07:32 +0530
Subject: [PATCH] Refactor voice availability check in App component to trigger
 on OAuth state changes. Update SidebarContentPanel to enhance billing display
 with improved styling and clearer upgrade call-to-action.

---
 apps/x/apps/renderer/src/App.tsx                | 12 ++++++++++--
 .../renderer/src/components/sidebar-content.tsx | 17 ++++++-----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx
index 01ad2b52..446f7cd9 100644
--- a/apps/x/apps/renderer/src/App.tsx
+++ b/apps/x/apps/renderer/src/App.tsx
@@ -568,8 +568,8 @@ function App() {
   const voiceRef = useRef(voice)
   voiceRef.current = voice
 
-  // Check if voice is available on mount
-  useEffect(() => {
+  // Check if voice is available on mount and when OAuth state changes
+  const refreshVoiceAvailability = useCallback(() => {
     Promise.all([
       window.ipc.invoke('voice:getConfig', null),
       window.ipc.invoke('oauth:getState', null),
@@ -583,6 +583,14 @@ function App() {
     })
   }, [])
 
+  useEffect(() => {
+    refreshVoiceAvailability()
+    const cleanup = window.ipc.on('oauth:didConnect', () => {
+      refreshVoiceAvailability()
+    })
+    return cleanup
+  }, [refreshVoiceAvailability])
+
   const handleStartRecording = useCallback(() => {
     setIsRecording(true)
     isRecordingRef.current = true
diff --git a/apps/x/apps/renderer/src/components/sidebar-content.tsx b/apps/x/apps/renderer/src/components/sidebar-content.tsx
index db18a8df..cd85449b 100644
--- a/apps/x/apps/renderer/src/components/sidebar-content.tsx
+++ b/apps/x/apps/renderer/src/components/sidebar-content.tsx
@@ -488,19 +488,14 @@ export function SidebarContentPanel({
           />
         )}
       </SidebarContent>
-      {/* Billing status */}
+      {/* Billing / upgrade CTA */}
       {isRowboatConnected && billing && (
         <div className="px-3 py-2">
-          <div className="flex items-center justify-between rounded-md border border-sidebar-border bg-sidebar-accent/30 px-2.5 py-1.5">
-            <div className="flex flex-col">
-              <span className="text-xs font-medium capitalize text-sidebar-foreground">
-                {billing.subscriptionPlan ?? 'Free'}
-              </span>
-              <span className="text-[10px] text-sidebar-foreground/50">
-                8 days left
-              </span>
-            </div>
-            <button className="upgrade-btn rounded-md bg-sidebar-accent px-2.5 py-1 text-[10px] font-medium text-sidebar-foreground transition-colors">
+          <div className="flex items-center justify-between rounded-lg border border-sidebar-border bg-sidebar-accent/20 px-3 py-2">
+            <span className="text-xs font-medium capitalize text-sidebar-foreground">
+              {billing.subscriptionPlan ?? 'Free'} plan
+            </span>
+            <button className="rounded-md bg-sidebar-foreground/10 px-2.5 py-1 text-[11px] font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-foreground/20">
               Upgrade
             </button>
           </div>