Add daita label to filters in location selector

2 files changed, 30 insertions, 8 deletions

diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 892df0afbc..8e59e2c30c 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -557,7 +557,7 @@ function MtuSetting() {
 
 function DaitaSettings() {
   const { setDaitaSettings } = useAppContext();
-  const daita = useSelector((state) => state.settings.wireguard.daita);
+  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
 
   const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean();
 
@@ -584,13 +584,25 @@ function DaitaSettings() {
               <YellowLabel>{messages.gettext('BETA')}</YellowLabel>
             </Cell.InputLabel>
           </AriaLabel>
-          <InfoButton
-            message={messages.pgettext(
-              'wireguard-settings-view',
-              'When this feature is enabled it stops the device from contacting certain domains or websites known for distributing ads, malware, trackers and more.',
-            )}></InfoButton>
+          <InfoButton>
+            <ModalMessage>
+              {
+                // TODO: These texts need to be polished
+                messages.pgettext(
+                  'wireguard-settings-view',
+                  'Enabling DAITA (Defence against AI Traffic Analysis) hides patterns in the VPN tunnel by generating dummy traffic and using a fixed packet size.',
+                )
+              }
+            </ModalMessage>
+            <ModalMessage>
+              {messages.pgettext(
+                'wireguard-settings-view',
+                'DAITA may cause significant overhead. We do not recommend enabling DAITA on a metered internet connection.',
+              )}
+            </ModalMessage>
+          </InfoButton>
           <AriaInput>
-            <Cell.Switch isOn={daita?.enabled ?? false} onChange={setDaita} />
+            <Cell.Switch isOn={daita} onChange={setDaita} />
           </AriaInput>
         </Cell.Container>
       </AriaInputGroup>
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 5ba0203939..e7bd4865cd 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -71,6 +71,7 @@ export default function SelectLocation() {
   const ownership = relaySettings?.ownership ?? Ownership.any;
   const providers = relaySettings?.providers ?? [];
   const filteredProviders = useFilteredProviders(providers, ownership);
+  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
 
   const [searchValue, setSearchValue] = useState('');
 
@@ -122,7 +123,7 @@ export default function SelectLocation() {
 
   const showOwnershipFilter = ownership !== Ownership.any;
   const showProvidersFilter = providers.length > 0;
-  const showFilters = showOwnershipFilter || showProvidersFilter;
+  const showFilters = showOwnershipFilter || showProvidersFilter || daita;
   return (
     <BackAction action={onClose}>
       <Layout>
@@ -220,6 +221,15 @@ export default function SelectLocation() {
                       </StyledClearFilterButton>
                     </StyledFilter>
                   )}
+
+                  {daita && (
+                    <StyledFilter>
+                      {sprintf(
+                        messages.pgettext('select-location-view', 'Setting: %(settingName)s'),
+                        { settingName: 'DAITA' },
+                      )}
+                    </StyledFilter>
+                  )}
                 </StyledFilterRow>
               )}