feat: enhance tier-based functionality across components

- Updated LicenseNag to simplify pricing options button text.
- Enhanced BatchActionsDropdown to conditionally enable actions based on user tier, integrating upgrade prompts.
- Modified LocalSyncDialog to filter available clients based on user tier, ensuring appropriate access.
- Improved PersonalMcpSection to reflect cloud sync availability based on tier status.
- Refined ServerStatusSwitch to provide upgrade prompts for tier restrictions.
- Adjusted LocalTable and LocalTableHeader to conditionally display sync options and upgrade prompts based on user tier.
- Updated ClientSelector to enforce tier-based client selection logic, allowing for development mode exceptions.
- Enhanced useTier hook to include comprehensive tier access checks and cloud sync availability.

Author: milisp

tauri-app/src/components/common/LicenseNag.tsx

@@ -118,10 +118,7 @@ export function LicenseNag() {
         <DialogFooter className="gap-2 sm:justify-between">
           <Button variant="outline" onClick={onDismiss}>Maybe later</Button>
           <div className="flex gap-2">
-            <Button onClick={() => openUrl("https://mcp-linker.store/pricing")}>Get Lifetime (One‑Time)</Button>
-          </div>
-          <div className="flex gap-2">
-            <Button onClick={() => openUrl("https://mcp-linker.store/pricing")}>Upgrade to Pro</Button>
+            <Button onClick={() => openUrl("https://mcp-linker.store/pricing")}>View Pricing Options</Button>
           </div>
         </DialogFooter>
       </DialogContent>

tauri-app/src/components/manage/BatchActionsDropdown.tsx

@@ -5,6 +5,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useTier } from "@/hooks/useTier";
+import { useGlobalDialogStore } from "@/stores/globalDialogStore";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 
 interface BatchActionsDropdownProps {
@@ -22,6 +24,28 @@ export const BatchActionsDropdown = ({
   isDeleting,
   hasSelectedRows,
 }: BatchActionsDropdownProps) => {
+  const { hasMinimumTier } = useTier();
+  const showGlobalDialog = useGlobalDialogStore((s) => s.showDialog);
+
+  // Enable/disable servers instantly requires LIFETIME or higher
+  const canToggle = hasMinimumTier("LIFETIME") || import.meta.env.DEV;
+
+  const handleEnableClick = () => {
+    if (!canToggle) {
+      showGlobalDialog("upgrade");
+      return;
+    }
+    handleBatchEnable?.();
+  };
+
+  const handleDisableClick = () => {
+    if (!canToggle) {
+      showGlobalDialog("upgrade");
+      return;
+    }
+    handleBatchDisable?.();
+  };
+
   return (
     <>
       {hasSelectedRows && (
@@ -33,13 +57,21 @@ export const BatchActionsDropdown = ({
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             {handleBatchEnable && (
-              <DropdownMenuItem onClick={handleBatchEnable}>
-                Enable Selected
+              <DropdownMenuItem
+                onClick={handleEnableClick}
+                disabled={!canToggle}
+                className={!canToggle ? "opacity-50" : ""}
+              >
+                Enable Selected {!canToggle && "🔒"}
               </DropdownMenuItem>
             )}
             {handleBatchDisable && (
-              <DropdownMenuItem onClick={handleBatchDisable}>
-                Disable Selected
+              <DropdownMenuItem
+                onClick={handleDisableClick}
+                disabled={!canToggle}
+                className={!canToggle ? "opacity-50" : ""}
+              >
+                Disable Selected {!canToggle && "🔒"}
               </DropdownMenuItem>
             )}
             <DropdownMenuItem onClick={handleBatchDelete} disabled={isDeleting}>

tauri-app/src/components/manage/LocalSyncDialog.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { availableClients } from "@/constants/clients";
+import { useTier } from "@/hooks/useTier";
 import { needspathClient } from "@/lib/data";
 import { useClientPathStore } from "@/stores/clientPathStore";
 import { open as openDialog } from "@tauri-apps/plugin-dialog";
@@ -54,6 +55,8 @@ export function LocalSyncDialog({
 
   const { getClientPath, setClientPath } = useClientPathStore();
 
+  const { tier, hasMinimumTier } = useTier();
+
   // Effect to save syncFromClient to localStorage
   useEffect(() => {
     localStorage.setItem("syncFromClient", syncFromClient);
@@ -150,6 +153,21 @@ export function LocalSyncDialog({
   const needsFromPath = needspathClient.includes(syncFromClient);
   const needsToPath = needspathClient.includes(syncToClient);
 
+  const filteredClients = availableClients.filter((client) => {
+    // Free users: only allow Claude and Windsurf
+    if (tier === "FREE" || !tier) {
+      return client.value === "claude" || client.value === "windsurf";
+    }
+
+    // Lifetime users: exclude Codex and Claude Code
+    if (tier === "LIFETIME") {
+      return client.value !== "codex" && client.value !== "claude_code";
+    }
+
+    // Other tiers: check minimum required tier
+    return hasMinimumTier(client.requiredTier);
+  });
+
   return (
     <Dialog
       open={open}
@@ -182,7 +200,7 @@ export function LocalSyncDialog({
                 />
               </SelectTrigger>
               <SelectContent>
-                {availableClients
+                {filteredClients
                   .filter((client) => client.value !== currentClient)
                   .map((client) => (
                     <SelectItem key={client.value} value={client.value}>
@@ -228,7 +246,7 @@ export function LocalSyncDialog({
                 />
               </SelectTrigger>
               <SelectContent>
-                {availableClients.map((client) => (
+                {filteredClients.map((client) => (
                   <SelectItem key={client.value} value={client.value}>
                     {client.label}
                   </SelectItem>

tauri-app/src/components/manage/LocalTable/LocalTableHeader.tsx

@@ -32,12 +32,15 @@ export const LocalTableHeader: React.FC<LocalTableHeaderProps> = ({
 }) => {
   const key = getEncryptionKey();
   const navigate = useNavigate();
-  const { isFree } = useTier();
+  const { hasMinimumTier, canUseCloudSync } = useTier();
+
+  // Local sync requires LIFETIME or higher
+  const canUseLocalSync = hasMinimumTier("LIFETIME") || import.meta.env.DEV;
 
   return (
     <div className="flex justify-between items-center">
-      {!isFree ?
-        <div className="flex gap-3 items-center">
+      <div className="flex gap-3 items-center">
+        {canUseLocalSync ? (
           <Button
             variant="outline"
             size="sm"
@@ -48,29 +51,43 @@ export const LocalTableHeader: React.FC<LocalTableHeaderProps> = ({
             <Monitor className="h-4 w-4" />
             Local Sync
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onCloudSync}
-            disabled={isSyncing}
-            className="flex items-center gap-2 hover:bg-accent hover:border-accent-foreground"
-          >
-            <Cloud className="h-4 w-4" />
-            Cloud Sync
-            <Key className="h-3 w-3 opacity-60" />
-          </Button>
+        ) : (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Monitor className="h-4 w-4 opacity-50" />
+            <span>Local Sync 🔒</span>
+            <UpgradePlanButton />
+          </div>
+        )}
 
-          {!key && (
-            <Button onClick={() => navigate("/settings")}>
+        {canUseCloudSync ? (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCloudSync}
+              disabled={isSyncing}
+              className="flex items-center gap-2 hover:bg-accent hover:border-accent-foreground"
+            >
               <Cloud className="h-4 w-4" />
-              Go to generate encryption key for end to end sync to cloud
+              Cloud Sync
+              <Key className="h-3 w-3 opacity-60" />
             </Button>
-          )}
-        </div>
-        : <div className="flex gap-3 items-center">
-            <UpgradePlanButton /> to sync bewteen multi clients
+
+            {!key && (
+              <Button onClick={() => navigate("/settings")} size="sm" variant="outline">
+                <Cloud className="h-4 w-4 mr-2" />
+                Generate Encryption Key
+              </Button>
+            )}
+          </>
+        ) : (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Cloud className="h-4 w-4 opacity-50" />
+            <span>Cloud Sync 🔒</span>
+            <UpgradePlanButton />
           </div>
-      }
+        )}
+      </div>
       <BatchActionsDropdown
         hasSelectedRows={Object.keys(rowSelection).length > 0}
         handleBatchEnable={handleBatchEnable}

tauri-app/src/components/manage/LocalTable/index.tsx

@@ -15,6 +15,7 @@ import {
 import { DataTable } from "@/components/ui/data-table";
 import { useCloudSync } from "@/hooks/useCloudSync";
 import { useMcpConfig } from "@/hooks/useMcpConfig";
+import { useTier } from "@/hooks/useTier";
 import { useClientPathStore } from "@/stores/clientPathStore";
 import { useGlobalDialogStore } from "@/stores/globalDialogStore";
 import { UserWithTier } from "@/stores/userStore";
@@ -32,7 +33,7 @@ interface LocalTableProps {
   user: UserWithTier;
 }
 
-export const LocalTable = ({ isAuthenticated, user }: LocalTableProps) => {
+export const LocalTable = ({ isAuthenticated, user: _user }: LocalTableProps) => {
   const { selectedClient, selectedPath } = useClientPathStore();
   const [localSyncDialogOpen, setLocalSyncDialogOpen] = useState(false);
   const [cloudSyncDialogOpen, setCloudSyncDialogOpen] = useState(false);
@@ -118,28 +119,20 @@ export const LocalTable = ({ isAuthenticated, user }: LocalTableProps) => {
 
   // Header action handlers
   const handleLocalSync = () => setLocalSyncDialogOpen(true);
+  const { canUseCloudSync } = useTier();
+
   const handleCloudSync = () => {
     if (!isAuthenticated) {
       showGlobalDialog("login");
       return;
     }
-    if (user.tier === "FREE") {
-      if (user.trialActive) {
-        if (
-          !user.trialEndsAt ||
-          new Date(user.trialEndsAt).getTime() < Date.now()
-        ) {
-          // Trial expired or no trial end date, show upgrade dialog
-          showGlobalDialog("upgrade");
-          return;
-        }
-        // Trial is active and not expired, allow sync (do nothing)
-      } else {
-        // No trial, show start trial dialog
-        showGlobalDialog("startTrial");
-        return;
-      }
+
+    // Check if user has Professional or Team tier for cloud sync
+    if (!canUseCloudSync) {
+      showGlobalDialog("upgrade");
+      return;
     }
+
     if (!key) {
       setShowMissingKeyDialog(true);
       return;

tauri-app/src/components/manage/PersonalMcpSection.tsx

@@ -2,6 +2,7 @@ import { LocalTable } from "@/components/manage/LocalTable/index";
 import { PersonalCloudTable } from "@/components/manage/PersonalCloudTable";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useTier } from "@/hooks/useTier";
 import { Cloud } from "lucide-react";
 
 /**
@@ -27,6 +28,8 @@ export function PersonalMcpSection({
   encryptionKey,
   navigate,
 }: PersonalMcpSectionProps) {
+  const { canUseCloudSync } = useTier();
+
   return (
     <Tabs
       value={personalTab}
@@ -37,7 +40,7 @@ export function PersonalMcpSection({
         <TabsTrigger value="personalLocal">Local</TabsTrigger>
         <TabsTrigger value="personalCloud">
           <Cloud />
-          Cloud {user?.tier === "FREE" && "🔒"}
+          Cloud {!canUseCloudSync && "🔒"}
         </TabsTrigger>
       </TabsList>
       <TabsContent value="personalLocal" className="flex-1 min-h-0">

tauri-app/src/components/manage/ServerStatusSwitch.tsx

@@ -1,4 +1,12 @@
 import { Switch } from "@/components/ui/switch";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useTier } from "@/hooks/useTier";
+import { useGlobalDialogStore } from "@/stores/globalDialogStore";
 
 interface ServerStatusSwitchProps {
   serverName: string;
@@ -13,17 +21,51 @@ export function ServerStatusSwitch({
   onEnable,
   onDisable,
 }: ServerStatusSwitchProps) {
+  const { hasMinimumTier } = useTier();
+  const showGlobalDialog = useGlobalDialogStore((s) => s.showDialog);
+
+  // Enable/disable servers instantly requires LIFETIME or higher
+  const canToggle = hasMinimumTier("LIFETIME") || import.meta.env.DEV;
+
+  const handleChange = (checked: boolean) => {
+    if (!canToggle) {
+      showGlobalDialog("upgrade");
+      return;
+    }
+
+    if (checked) {
+      onEnable(serverName);
+    } else {
+      onDisable(serverName);
+    }
+  };
+
+  if (!canToggle) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center">
+              <Switch
+                checked={isActive}
+                disabled={true}
+                className="data-[state=checked]:bg-green-600 opacity-50 cursor-not-allowed"
+              />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Upgrade to Lifetime Basic or higher to enable/disable servers instantly</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
   return (
     <div className="flex items-center">
       <Switch
         checked={isActive}
-        onCheckedChange={(checked) => {
-          if (checked) {
-            onEnable(serverName);
-          } else {
-            onDisable(serverName);
-          }
-        }}
+        onCheckedChange={handleChange}
         className="data-[state=checked]:bg-green-600"
       />
     </div>