tray update - windows 11 window management (#881)

* migrate from poc

* ui fixes and fix swapping windows

* clippy fix

* update styles

* clippy fixes

* Update mod.rs

Author: filipslezaklab

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,