Add app URL handling in Sidebar and Account Settings

(Wire up the upgrade buttons)

- Introduced `appUrl` state in both SidebarContentPanel and AccountSettings components.
- Updated OAuth state handling to fetch and set the app URL when connected to Rowboat.
- Enhanced Upgrade button functionality to open the app URL if available.
- Improved error handling during app URL retrieval to ensure robustness.

apps/x/apps/renderer/src/components/settings/account-settings.tsx

@@ -27,6 +27,7 @@ export function AccountSettings({ dialogOpen }: AccountSettingsProps) {
   const [connectionLoading, setConnectionLoading] = useState(true)
   const [disconnecting, setDisconnecting] = useState(false)
   const [connecting, setConnecting] = useState(false)
+  const [appUrl, setAppUrl] = useState<string | null>(null)
   const { billing, isLoading: billingLoading } = useBilling(isRowboatConnected)
 
   const checkConnection = useCallback(async () => {
@@ -48,6 +49,14 @@ export function AccountSettings({ dialogOpen }: AccountSettingsProps) {
     }
   }, [dialogOpen, checkConnection])
 
+  useEffect(() => {
+    if (isRowboatConnected) {
+      window.ipc.invoke('account:getRowboat', null)
+        .then((account) => setAppUrl(account.config?.appUrl ?? null))
+        .catch(() => {})
+    }
+  }, [isRowboatConnected])
+
   useEffect(() => {
     const cleanup = window.ipc.on('oauth:didConnect', (event) => {
       if (event.provider === 'rowboat') {
@@ -158,7 +167,7 @@ export function AccountSettings({ dialogOpen }: AccountSettingsProps) {
                   <p className="text-xs text-muted-foreground capitalize">{billing.subscriptionStatus}</p>
                 )}
               </div>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" onClick={() => appUrl && window.open(appUrl)}>
                 Upgrade
               </Button>
             </div>

apps/x/apps/renderer/src/components/sidebar-content.tsx

@@ -405,6 +405,7 @@ export function SidebarContentPanel({
   const connectorsButtonRef = useRef<HTMLButtonElement | null>(null)
   const [isRowboatConnected, setIsRowboatConnected] = useState(false)
   const [loggingIn, setLoggingIn] = useState(false)
+  const [appUrl, setAppUrl] = useState<string | null>(null)
   const { billing } = useBilling(isRowboatConnected)
 
   const handleRowboatLogin = useCallback(async () => {
@@ -427,13 +428,20 @@ export function SidebarContentPanel({
         const result = await window.ipc.invoke('oauth:getState', null)
         const config = result.config || {}
         const hasError = Object.values(config).some((entry) => Boolean(entry?.error))
+        const connected = config['rowboat']?.connected ?? false
         if (mounted) {
           setHasOauthError(hasError)
-          setIsRowboatConnected(config['rowboat']?.connected ?? false)
+          setIsRowboatConnected(connected)
           if (!hasError) {
             setShowOauthAlert(true)
           }
         }
+        if (connected && mounted) {
+          try {
+            const account = await window.ipc.invoke('account:getRowboat', null)
+            if (mounted) setAppUrl(account.config?.appUrl ?? null)
+          } catch { /* ignore */ }
+        }
       } catch (error) {
         console.error('Failed to fetch OAuth state:', error)
         if (mounted) {
@@ -510,7 +518,10 @@ export function SidebarContentPanel({
             <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">
+            <button
+              onClick={() => appUrl && window.open(appUrl)}
+              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>