settings refactor for plans

Author: charlesvien

apps/code/src/renderer/features/billing/stores/seatStore.ts

@@ -1,4 +1,5 @@
 import { useAuthStore } from "@features/auth/stores/authStore";
+import { getCloudUrlFromRegion } from "@shared/constants/oauth";
 import type { SeatData } from "@shared/types/seat";
 import { PLAN_FREE, PLAN_PRO } from "@shared/types/seat";
 import { electronStorage } from "@utils/electronStorage";
@@ -50,6 +51,12 @@ function parseFetcherError(
   }
 }
 
+function getBillingUrl(): string {
+  const region = useAuthStore.getState().cloudRegion;
+  const base = region ? getCloudUrlFromRegion(region) : "http://localhost:8010";
+  return `${base}/organization/billing`;
+}
+
 function handleSeatError(
   error: unknown,
   set: (state: Partial<SeatStoreState>) => void,
@@ -60,14 +67,16 @@ function handleSeatError(
     return;
   }
 
+  const billingUrl = getBillingUrl();
+
   if (
     "redirectUrl" in error &&
     typeof (error as { redirectUrl: unknown }).redirectUrl === "string"
   ) {
     set({
       isLoading: false,
       error: "Billing subscription required",
-      redirectUrl: (error as { redirectUrl: string }).redirectUrl,
+      redirectUrl: billingUrl,
     });
     return;
   }
@@ -81,7 +90,7 @@ function handleSeatError(
           typeof parsed.body.error === "string"
             ? parsed.body.error
             : "Billing subscription required",
-        redirectUrl: parsed.body.redirect_url,
+        redirectUrl: billingUrl,
       });
       return;
     }
@@ -130,12 +139,7 @@ export const useSeatStore = create<SeatStore>()(
           const client = getClient();
           const existing = await client.getMySeat();
           if (existing) {
-            if (existing.plan_key === PLAN_FREE) {
-              set({ seat: existing, isLoading: false });
-              return;
-            }
-            const seat = await client.upgradeSeat(PLAN_FREE);
-            set({ seat, isLoading: false });
+            set({ seat: existing, isLoading: false });
             return;
           }
           const seat = await client.createSeat(PLAN_FREE);

apps/code/src/renderer/features/settings/components/SettingsDialog.tsx

@@ -1,35 +1,39 @@
+import { useAuthStore } from "@features/auth/stores/authStore";
 import {
   type SettingsCategory,
   useSettingsDialogStore,
 } from "@features/settings/stores/settingsDialogStore";
+import { useSeat } from "@hooks/useSeat";
 import {
   ArrowLeft,
   ArrowsClockwise,
   CaretRight,
   Cloud,
   Code,
+  CreditCard,
   Folder,
   GearSix,
   HardDrives,
   Keyboard,
   Palette,
   Plugs,
+  SignOut,
   TrafficSignal,
   TreeStructure,
-  User,
   Wrench,
 } from "@phosphor-icons/react";
-import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
+import { Avatar, Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
 import { type ReactNode, useEffect } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { AccountSettings } from "./sections/AccountSettings";
 import { AdvancedSettings } from "./sections/AdvancedSettings";
 import { ClaudeCodeSettings } from "./sections/ClaudeCodeSettings";
 import { CloudEnvironmentsSettings } from "./sections/CloudEnvironmentsSettings";
 import { EnvironmentsSettings } from "./sections/environments/EnvironmentsSettings";
 import { GeneralSettings } from "./sections/GeneralSettings";
 import { McpServersSettings } from "./sections/McpServersSettings";
 import { PersonalizationSettings } from "./sections/PersonalizationSettings";
+import { PlanUsageSettings } from "./sections/PlanUsageSettings";
 import { ShortcutsSettings } from "./sections/ShortcutsSettings";
 import { SignalSourcesSettings } from "./sections/SignalSourcesSettings";
 import { UpdatesSettings } from "./sections/UpdatesSettings";
@@ -45,7 +49,7 @@ interface SidebarItem {
 
 const SIDEBAR_ITEMS: SidebarItem[] = [
   { id: "general", label: "General", icon: <GearSix size={16} /> },
-  { id: "account", label: "Account", icon: <User size={16} /> },
+  { id: "plan-usage", label: "Plan & Usage", icon: <CreditCard size={16} /> },
   { id: "workspaces", label: "Workspaces", icon: <Folder size={16} /> },
   { id: "worktrees", label: "Worktrees", icon: <TreeStructure size={16} /> },
   {
@@ -78,7 +82,7 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
 
 const CATEGORY_TITLES: Record<SettingsCategory, string> = {
   general: "General",
-  account: "Account",
+  "plan-usage": "Plan & Usage",
   workspaces: "Workspaces",
   worktrees: "Worktrees",
   environments: "Environments",
@@ -95,7 +99,7 @@ const CATEGORY_TITLES: Record<SettingsCategory, string> = {
 
 const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
   general: GeneralSettings,
-  account: AccountSettings,
+  "plan-usage": PlanUsageSettings,
   workspaces: WorkspacesSettings,
   worktrees: WorktreesSettings,
   environments: EnvironmentsSettings,
@@ -113,6 +117,17 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
 export function SettingsDialog() {
   const { isOpen, activeCategory, close, setCategory } =
     useSettingsDialogStore();
+  const { client, isAuthenticated } = useAuthStore();
+  const { seat, planLabel } = useSeat();
+
+  const { data: user } = useQuery({
+    queryKey: ["currentUser"],
+    queryFn: async () => {
+      if (!client) return null;
+      return await client.getCurrentUser();
+    },
+    enabled: !!client && isAuthenticated,
+  });
 
   useHotkeys("escape", close, {
     enabled: isOpen,
@@ -138,13 +153,50 @@ export function SettingsDialog() {
 
   const ActiveComponent = CATEGORY_COMPONENTS[activeCategory];
 
+  const initials = user
+    ? user.first_name && user.last_name
+      ? `${user.first_name[0]}${user.last_name[0]}`.toUpperCase()
+      : (user.email?.substring(0, 2).toUpperCase() ?? "U")
+    : null;
+
   return (
     <div
       className="fixed inset-0 z-[100] flex"
       style={{ backgroundColor: "var(--color-background)" }}
       data-overlay="settings"
     >
-      <div className="flex h-full w-[256px] shrink-0 flex-col border-gray-6 border-r pt-8">
+      <div className="flex h-full w-[256px] shrink-0 flex-col border-gray-6 border-r">
+        <div
+          className="drag"
+          style={{
+            height: 36,
+            flexShrink: 0,
+            borderBottom: "1px solid var(--gray-6)",
+          }}
+        />
+
+        {isAuthenticated && user && initials && (
+          <Flex
+            align="center"
+            gap="3"
+            px="3"
+            py="3"
+            style={{ borderBottom: "1px solid var(--gray-5)" }}
+          >
+            <Avatar size="2" fallback={initials} radius="full" color="amber" />
+            <Flex direction="column" style={{ minWidth: 0 }}>
+              <Text size="2" weight="medium" truncate>
+                {user.email}
+              </Text>
+              {seat && (
+                <Text size="1" style={{ color: "var(--gray-9)" }}>
+                  {planLabel} Plan
+                </Text>
+              )}
+            </Flex>
+          </Flex>
+        )}
+
         <button
           type="button"
           className="mt-2 flex cursor-pointer items-center gap-2 border-0 bg-transparent px-3 py-2 text-left text-[13px] text-gray-11 transition-colors hover:bg-gray-3"
@@ -166,59 +218,84 @@ export function SettingsDialog() {
             ))}
           </div>
         </ScrollArea>
+
+        {isAuthenticated && (
+          <button
+            type="button"
+            className="flex cursor-pointer items-center gap-2 border-0 border-gray-5 border-t bg-transparent px-3 py-2.5 text-left font-mono text-[12px] text-gray-9 transition-colors hover:bg-gray-3 hover:text-gray-11"
+            onClick={() => useAuthStore.getState().logout()}
+          >
+            <SignOut size={14} />
+            <span>Sign out</span>
+          </button>
+        )}
       </div>
 
-      <div className="relative flex flex-1 justify-center overflow-hidden pt-8">
-        <svg
-          aria-hidden="true"
-          style={{
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none",
-            opacity: 0.4,
-            maskImage: "linear-gradient(to top, black 0%, transparent 100%)",
-            WebkitMaskImage:
-              "linear-gradient(to top, black 0%, transparent 100%)",
-          }}
-        >
-          <defs>
-            <pattern
-              id="settings-dot-pattern"
-              patternUnits="userSpaceOnUse"
-              width="8"
-              height="8"
-            >
-              <circle cx="0" cy="0" r="1" fill="var(--gray-6)" />
-              <circle cx="0" cy="8" r="1" fill="var(--gray-6)" />
-              <circle cx="8" cy="8" r="1" fill="var(--gray-6)" />
-              <circle cx="8" cy="0" r="1" fill="var(--gray-6)" />
-              <circle cx="4" cy="4" r="1" fill="var(--gray-6)" />
-            </pattern>
-          </defs>
-          <rect width="100%" height="100%" fill="url(#settings-dot-pattern)" />
-        </svg>
-        <ScrollArea
+      <div className="relative flex flex-1 flex-col overflow-hidden">
+        <div
+          className="drag"
           style={{
-            height: "100%",
-            width: "100%",
+            height: 36,
+            flexShrink: 0,
+            borderBottom: "1px solid var(--gray-6)",
           }}
-        >
-          <Box
-            p="6"
-            mx="auto"
-            style={{ position: "relative", zIndex: 1, maxWidth: "800px" }}
+        />
+        <div className="relative flex flex-1 justify-center overflow-hidden">
+          <svg
+            aria-hidden="true"
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none",
+              opacity: 0.4,
+              maskImage: "linear-gradient(to top, black 0%, transparent 100%)",
+              WebkitMaskImage:
+                "linear-gradient(to top, black 0%, transparent 100%)",
+            }}
           >
-            <Flex direction="column" gap="4">
-              <Text size="4" weight="medium">
-                {CATEGORY_TITLES[activeCategory]}
-              </Text>
-              <ActiveComponent />
-            </Flex>
-          </Box>
-        </ScrollArea>
+            <defs>
+              <pattern
+                id="settings-dot-pattern"
+                patternUnits="userSpaceOnUse"
+                width="8"
+                height="8"
+              >
+                <circle cx="0" cy="0" r="1" fill="var(--gray-6)" />
+                <circle cx="0" cy="8" r="1" fill="var(--gray-6)" />
+                <circle cx="8" cy="8" r="1" fill="var(--gray-6)" />
+                <circle cx="8" cy="0" r="1" fill="var(--gray-6)" />
+                <circle cx="4" cy="4" r="1" fill="var(--gray-6)" />
+              </pattern>
+            </defs>
+            <rect
+              width="100%"
+              height="100%"
+              fill="url(#settings-dot-pattern)"
+            />
+          </svg>
+          <ScrollArea
+            style={{
+              height: "100%",
+              width: "100%",
+            }}
+          >
+            <Box
+              p="6"
+              mx="auto"
+              style={{ position: "relative", zIndex: 1, maxWidth: "800px" }}
+            >
+              <Flex direction="column" gap="4">
+                <Text size="4" weight="medium">
+                  {CATEGORY_TITLES[activeCategory]}
+                </Text>
+                <ActiveComponent />
+              </Flex>
+            </Box>
+          </ScrollArea>
+        </div>
       </div>
     </div>
   );