(tauri) Fix windows st include/exclude logic (#5029)

* - Reverse the included/excluded logic
- Allow include/exclude when st is disabled

* Use accountSummary.is-subscription-active in Account settings

Author: agentpietrucha

nym-vpn-app/src/screens/settings/account/AccountDescription.tsx

@@ -23,6 +23,7 @@ export function AccountDescription() {
     t,
     accountSyncing,
     accountState,
+    accountSummary,
   );
 
   const status = useMemo(
@@ -34,15 +35,19 @@ export function AccountDescription() {
     return (
       <span
         className={clsx(
-          getAccountDescriptionColor(accountSyncing, accountState),
+          getAccountDescriptionColor(
+            accountSyncing,
+            accountState,
+            accountSummary,
+          ),
         )}
       >
         {accountStateDescription}
       </span>
     );
   }
 
-  if (!accountSummary) {
+  if (!accountSummary?.['subscription-valid-until']) {
     return null;
   }
 

nym-vpn-app/src/screens/settings/account/account-status/AccountStatus.tsx

@@ -14,8 +14,9 @@ export function AccountStatus() {
   const needsSubscription = useMemo(
     () =>
       accountState === 'no-subscription' ||
-      accountState === 'status-not-active',
-    [accountState],
+      accountState === 'status-not-active' ||
+      !accountSummary?.['is-subscription-active'],
+    [accountState, accountSummary],
   );
 
   if (!accountState || accountState === 'error' || accountState === 'offline') {

nym-vpn-app/src/screens/settings/account/utils.ts

@@ -5,6 +5,7 @@ import { AccountState, TAccountSummary } from '../../../types';
 export const getAccountDescriptionColor = (
   accountSyncing: boolean,
   state?: AccountState | null,
+  accountSummary?: TAccountSummary | null,
 ) => {
   if (accountSyncing) {
     return 'text-iron dark:text-bombay';
@@ -20,13 +21,17 @@ export const getAccountDescriptionColor = (
   if (state === 'offline' || state === 'status-not-active') {
     return 'text-cheddar dark:text-king-nacho ';
   }
+  if (!accountSummary?.['is-subscription-active']) {
+    return 'text-aphrodisiac';
+  }
   return 'text-iron dark:text-bombay';
 };
 
 export const getAccountStateDescription = (
   t: TFunction<'settings', undefined>,
   accountSyncing: boolean,
   state?: AccountState | null,
+  accountSummary?: TAccountSummary | null,
 ) => {
   if (accountSyncing) {
     return t('account.syncing');
@@ -51,9 +56,14 @@ export const getAccountStateDescription = (
       return t('account.offline', { ns: 'errors' });
     case 'error':
       return t('account.internal', { ns: 'errors' });
-    default:
-      return null;
   }
+
+  if (!accountSummary?.['is-subscription-active']) {
+    return t('account.no-plan');
+  }
+
+  // Global default
+  return null;
 };
 
 export const getAccountStatus = (accountSummary?: TAccountSummary | null) => {

nym-vpn-app/src/screens/settings/split-tunneling/AppItem.tsx

@@ -9,14 +9,13 @@ export type AppEntry = App & {
 
 type AppItemProps = {
   app: AppEntry;
-  enabled: boolean;
   onStateChange: (
     app: AppEntry,
     state: 'excluded' | 'included',
   ) => Promise<void>;
 };
 
-function AppItem({ app, enabled, onStateChange }: AppItemProps) {
+function AppItem({ app, onStateChange }: AppItemProps) {
   return (
     <div className="flex items-center gap-3 px-4 py-3 bg-white dark:bg-charcoal">
       <div className="w-7 h-7 flex items-center justify-center">
@@ -40,28 +39,24 @@ function AppItem({ app, enabled, onStateChange }: AppItemProps) {
         <button
           className={clsx(
             'px-2  h-full w-full flex items-center justify-center cursor-default transition-noborder border-r border-r-iron dark:border-r-bombay rounded-l-lg',
-            app.state === 'excluded'
+            app.state === 'included'
               ? 'bg-aphrodisiac/20 text-aphrodisiac'
               : 'text-iron dark:text-bombay',
-            !enabled && 'opacity-50 cursor-not-allowed',
           )}
-          onClick={() => onStateChange(app, 'excluded')}
+          onClick={() => onStateChange(app, 'included')}
           aria-label={`Exclude ${app.name} from VPN`}
-          disabled={!enabled}
         >
           <MsIcon icon="block" className="text-base" />
         </button>
         <button
           className={clsx(
             'px-2  h-full w-full  flex items-center justify-center cursor-default transition-noborder rounded-r-lg',
-            app.state === 'included'
+            app.state === 'excluded'
               ? 'bg-malachite-moss/15 dark:bg-malachite/15 text-malachite-moss dark:text-malachite'
               : 'text-iron dark:text-bombay',
-            !enabled && 'opacity-50 cursor-not-allowed',
           )}
-          onClick={() => onStateChange(app, 'included')}
+          onClick={() => onStateChange(app, 'excluded')}
           aria-label={`Include ${app.name} in VPN`}
-          disabled={!enabled}
         >
           <MsIcon icon="shield" className="text-base" />
         </button>

nym-vpn-app/src/screens/settings/split-tunneling/SplitTunneling.tsx

@@ -104,11 +104,7 @@ function SplitTunneling() {
                     {/* Apps in this section */}
                     {groupedApps[letter].map((app, i) => (
                       <div key={app.name}>
-                        <AppItem
-                          app={app}
-                          enabled={enabled}
-                          onStateChange={handleStateChange}
-                        />
+                        <AppItem app={app} onStateChange={handleStateChange} />
                         {i < groupedApps[letter].length - 1 && (
                           <div className="mx-4 h-px bg-mercury/60 dark:bg-white/5" />
                         )}