tray update - windows 11 window management

new-ui/src/pages/compact/CompactPage/CompactPage.tsx

@@ -1,14 +1,33 @@
 import clsx from 'clsx';
 import './style.scss';
+import { useMutation } from '@tanstack/react-query';
 import type { JSX, PropsWithChildren } from 'react';
+import { IconButton } from '../../../shared/components/IconButton/IconButton';
+import { IconButtonVariant } from '../../../shared/components/IconButton/types';
+import { api } from '../../../shared/rust-api/api';
 
 interface Props extends PropsWithChildren {
   containerProps?: JSX.IntrinsicElements['main'];
 }
 
 export const CompactPage = ({ children, containerProps }: Props) => {
+  const { mutate: closeWindow, isPending } = useMutation({
+    mutationFn: api.closeTrayWindow,
+  });
+
   return (
     <main {...containerProps} className={clsx('compact-page', containerProps?.className)}>
+      <div className="close-window">
+        <IconButton
+          variant={IconButtonVariant.SmallSelected}
+          icon="close"
+          onClick={() => {
+            if (!isPending) {
+              closeWindow();
+            }
+          }}
+        />
+      </div>
       {children}
     </main>
   );

new-ui/src/pages/compact/CompactPage/style.scss

@@ -1,4 +1,11 @@
 .compact-page {
   box-sizing: border-box;
-  padding: 8px;
+  padding: var(--spacing-md);
+  position: relative;
+
+  > .close-window {
+    position: absolute;
+    right: var(--spacing-md);
+    top: var(--spacing-md);
+  }
 }

new-ui/src/shared/components/Button/style.scss

@@ -24,6 +24,7 @@
   display: inline-block;
   min-width: 0;
   user-select: none;
+  background-clip: padding-box;
 
   > .btn-content {
     display: inline-grid;
@@ -60,6 +61,7 @@
   .text {
     font: var(--btn-font);
     color: inherit;
+    user-select: none;
 
     @include animate(color);
   }
@@ -84,7 +86,7 @@
 
   &.size-primary {
     --btn-font: var(--t-button-label-primary);
-    --btn-size: 40px;
+    --btn-size: 36px;
 
     border-radius: 8px;
     padding: var(--spacing-sm) var(--spacing-lg);

new-ui/src/shared/components/Divider/style.scss

@@ -1,6 +1,6 @@
 .divider {
   --divider-line-size: 1px;
-  --divider-color: var(--bg-white-20);
+  --divider-color: var(--bg-white-10);
 
   user-select: none;
 

new-ui/src/shared/components/LocationCard/LocationCard.tsx

@@ -57,7 +57,12 @@ const LocationCardInner = ({ isOpen, onOpen, disableOpen }: InnerProps) => {
       data-network={location.network_id}
       data-id={location.id}
     >
-      <div className="top-track">
+      <div
+        className={clsx('top-track', {
+          interactive: !disableOpen,
+        })}
+        onClick={onOpen}
+      >
         <div className="left">
           <LocationCardIcon />
           <div className="info">
@@ -82,7 +87,6 @@ const LocationCardInner = ({ isOpen, onOpen, disableOpen }: InnerProps) => {
               icon={IconKind.ArrowSmall}
               variant={isOpen ? IconButtonVariant.SmallSelected : IconButtonVariant.Small}
               iconRotation={isOpen ? Direction.DOWN : Direction.RIGHT}
-              onClick={onOpen}
             />
           )}
         </div>

new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx

@@ -25,11 +25,11 @@ export const MfaSelector = ({
       case 'email':
         return 'mail';
       case 'mobileapprove':
-        return 'mobile-lock';
+        return 'mobile';
       case 'oidc':
         return 'token';
       case 'totp':
-        return 'mobile-lock';
+        return 'lock-closed';
       case 'biometric':
         return 'biometric';
     }

new-ui/src/shared/components/LocationCard/components/MfaSelector/style.scss

@@ -3,6 +3,7 @@
   --border: var(--border-default);
   --icon: var(--fg-white-80);
   --color: var(--fg-white-80);
+  --box-shadow: box-shadow: 0 4px 4px 0 rgb(0 0 0 / 0%);
 
   display: grid;
   grid-template-columns: 20px minmax(0, 1fr) 16px;
@@ -13,34 +14,37 @@
   user-select: none;
   align-items: center;
   box-sizing: border-box;
+  box-shadow: var(--box-shadow);
   padding: 0 var(--spacing-md);
   min-height: 40px;
   border-radius: 8px;
   cursor: pointer;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  transition-property: border-color, background, color;
+  transition-property: border-color, background, color, box-shadow;
+  background-clip: padding-box;
 
   &:hover {
     --bg: var(--bg-white-5);
     --color: var(--fg-white-100);
-    --border: var(--border-default);
+    --border: var(--border-action-disabled);
     --icon: var(--fg-white-100);
   }
 
   &.selected {
-    --bg: var(--bg-white-5);
+    --bg: var(--bg-white-10);
     --color: var(--fg-white-100);
-    --border: transparent;
+    --border: var(--border-action-disabled);
     --icon: var(--fg-white-100);
+    --box-shadow: box-shadow: 0 4px 4px 0 rgb(0 0 0 / 5%);
   }
 
   > .middle {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-start;
-    column-gap: var(--spacing-xs);
+    column-gap: var(--spacing-md);
   }
 
   .default-badge {
@@ -71,6 +75,6 @@
 
   .name {
     color: inherit;
-    font: var(--t-body-xs);
+    font: var(--t-body-sm-400);
   }
 }

new-ui/src/shared/components/LocationCard/context/context.tsx

@@ -1,5 +1,5 @@
 import { createContext, type ReactNode, useCallback, useContext, useState } from 'react';
-import type { InstanceInfo, LocationInfo } from '../../../rust-api/types';
+import type { InstanceInfo, LocationInfo, MfaMethodValue } from '../../../rust-api/types';
 import { MfaMethod } from '../../../rust-api/types';
 import { LocationCardViews, type LocationCardViewsValue } from './types';
 
@@ -10,6 +10,8 @@ interface LocationCardContextValue {
   previousView: LocationCardViewsValue | null;
   setView: (view: LocationCardViewsValue) => void;
   startMfa: () => void;
+  localMfaMethod: MfaMethodValue;
+  setLocalMfaMethod: (method: MfaMethodValue) => void;
 }
 
 const LocationCardContext = createContext<LocationCardContextValue | null>(null);
@@ -37,6 +39,9 @@ export const LocationCardProvider = ({
   const [currentView, setCurrentView] = useState<LocationCardViewsValue>(
     location.active ? LocationCardViews.Connected : LocationCardViews.Default,
   );
+  const [localMfaMethod, setLocalMfaMethod] = useState<MfaMethodValue>(
+    location.mfa_method ?? MfaMethod.Totp,
+  );
 
   const setView = useCallback(
     (view: LocationCardViewsValue) => {
@@ -47,7 +52,7 @@ export const LocationCardProvider = ({
   );
 
   const startMfa = useCallback(() => {
-    switch (location.mfa_method) {
+    switch (localMfaMethod) {
       case MfaMethod.Totp:
         setView(LocationCardViews.MfaTotp);
         break;
@@ -61,7 +66,7 @@ export const LocationCardProvider = ({
         setView(LocationCardViews.MfaMobile);
         break;
     }
-  }, [location.mfa_method, setView]);
+  }, [localMfaMethod, setView]);
 
   return (
     <LocationCardContext.Provider
@@ -72,6 +77,8 @@ export const LocationCardProvider = ({
         location,
         instance,
         startMfa,
+        localMfaMethod,
+        setLocalMfaMethod,
       }}
     >
       {children}

new-ui/src/shared/components/LocationCard/style.scss

@@ -1,7 +1,7 @@
 .location-card {
-  border-radius: 12px;
+  border-radius: 16px;
   box-sizing: border-box;
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-lg);
   background-color: var(--bg-dark-blue-40);
 
   > .top-track {
@@ -11,6 +11,17 @@
     justify-content: flex-start;
     user-select: none;
 
+    &.interactive {
+      cursor: pointer;
+
+      &:hover {
+        > .right > .icon-button {
+          --bg: var(--c-white-20);
+          --icon: var(--c-white-100);
+        }
+      }
+    }
+
     > .left {
       display: flex;
       flex-flow: row;

new-ui/src/shared/components/LocationCard/views/DefaultView/DefaultView.tsx

@@ -38,7 +38,11 @@ export const DefaultView = () => {
           <Toggle
             disabled={location.active}
             active={location.route_all_traffic}
-            label="All traffic is allowed"
+            label={
+              location.route_all_traffic
+                ? 'All traffic is allowed'
+                : 'Predefined traffic only'
+            }
             onClick={() => {
               updateRouting({
                 connectionType: location.connection_type,

new-ui/src/shared/components/LocationCard/views/DefaultView/style.scss

@@ -5,9 +5,10 @@
     grid-template-rows: 1fr;
     align-items: center;
     column-gap: var(--spacing-md);
+    user-select: none;
 
     > .name {
-      font: var(--t-body-xs-500);
+      font: var(--t-body-sm-400);
       color: var(--fg-white-100);
     }
 
@@ -17,18 +18,20 @@
       display: inline-flex;
       flex-flow: row nowrap;
       align-items: center;
+      justify-content: center;
       padding: 0 4px;
-      height: 18px;
-      width: 32px;
-      background-color: var(--bg-white-100);
+      min-height: 20px;
+      width: 36px;
+      background-color: transparent;
+      border: 1px solid var(--bg-white-60);
 
       p {
         font: var(--font-family-body);
         font-size: 11px;
         font-weight: 500;
         line-height: 16px;
         letter-spacing: 0.11px;
-        color: var(--fg-action);
+        color: var(--fg-white-60);
       }
     }
   }

new-ui/src/shared/components/LocationCard/views/LocationCardMfaSettings/LocationCardMfaSettings.tsx

@@ -30,14 +30,18 @@ export const LocationCardMfaSettings = () => {
     },
   });
 
-  const { previousView, setView, location } = useLocationCardContext();
+  const { previousView, setView, location, localMfaMethod, setLocalMfaMethod } =
+    useLocationCardContext();
 
-  const mfaMethod = location.mfa_method ?? MfaMethod.Totp;
+  const locationDefaultMfaMethod = location.mfa_method ?? MfaMethod.Totp;
 
-  const [selectedPref, setSelectedPref] = useState<MfaMethodValue>(
-    mfaMethod ?? MfaMethod.Totp,
+  const [selectedMethod, setSelectedPref] = useState<MfaMethodValue>(
+    localMfaMethod ?? MfaMethod.Totp,
   );
 
+  const isFromDefault = previousView === LocationCardViews.Default;
+  const [setAsDefault, setSetAsDefault] = useState(true);
+
   const MfaFactorsList = useMemo((): MfaMethodValue[] => {
     if (location.location_mfa_mode === LocationMfaMode.Internal) {
       return [MfaMethod.Totp, MfaMethod.Email, MfaMethod.MobileApprove];
@@ -46,13 +50,14 @@ export const LocationCardMfaSettings = () => {
   }, [location.location_mfa_mode]);
 
   const handleSubmit = () => {
-    if (selectedPref !== mfaMethod) {
+    setLocalMfaMethod(selectedMethod);
+    if ((isFromDefault || setAsDefault) && selectedMethod !== locationDefaultMfaMethod) {
       setMfaMethod({
         locationId: location.id,
-        mfaMethod: selectedPref,
+        mfaMethod: selectedMethod,
       });
-      setView(previousView ?? LocationCardViews.Default);
     }
+    setView(previousView ?? LocationCardViews.Default);
   };
 
   return (
@@ -70,21 +75,19 @@ export const LocationCardMfaSettings = () => {
           <MfaSelector
             key={factor}
             factor={factor}
-            selected={selectedPref === factor}
-            isDefault={mfaMethod === factor}
+            selected={selectedMethod === factor}
+            isDefault={locationDefaultMfaMethod === factor}
             onClick={() => setSelectedPref(factor)}
           />
         ))}
       </div>
-      <Checkbox
-        active={
-          previousView === LocationCardViews.Default ? true : mfaMethod === selectedPref
-        }
-        disabled={
-          previousView === LocationCardViews.Default ? true : mfaMethod === selectedPref
-        }
-        text="Set as default MFA method"
-      />
+      {!isFromDefault && (
+        <Checkbox
+          active={isFromDefault ? true : setAsDefault}
+          onClick={() => setSetAsDefault((prev) => !prev)}
+          text="Set as default MFA method"
+        />
+      )}
       <Controls>
         <IconButton
           variant={IconButtonVariant.BigSelected}
@@ -96,10 +99,9 @@ export const LocationCardMfaSettings = () => {
         />
         <div className="right">
           <Button
-            disabled={selectedPref === mfaMethod}
             variant={ButtonVariant.Primary}
             size={'primary'}
-            text="Submit"
+            text="Save changes"
             onClick={handleSubmit}
           />
         </div>

new-ui/src/shared/components/Toggle/style.scss

@@ -26,6 +26,7 @@
     border: var(--border-1) solid var(--border);
     min-width: 36px;
     flex-shrink: 0;
+    background-clip: padding-box;
 
     @include animate(border-color, background-color);