Wlan current connected network view

src/apps/toolbar/modules/network/infra/WlanSelector.tsx

@@ -1,5 +1,6 @@
 import { invoke } from '@tauri-apps/api/core';
 import { Popover } from 'antd';
+import { AnimatePresence, motion } from 'framer-motion';
 import { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -9,12 +10,22 @@ import { BackgroundByLayersV2 } from '../../../../seelenweg/components/Backgroun
 
 import { Selectors } from '../../shared/store/app';
 
-import { WlanSelectorEntry } from './WlanSelectorEntry';
+import { NetworkAdapter } from '../../shared/store/domain';
+import { WlanBssEntry } from '../domain';
+
+import { WlanSelectorEntry, WlanSelectorEntryProps } from './WlanSelectorEntry';
 
 function WlanSelector({ open }: { open: boolean }) {
   const [selected, setSelected] = useState<string | null>(null);
+  const [connectedEntry, setConnectedEntry] = useState<WlanBssEntry | undefined>(undefined);
+  const [connectedNetworkAdapter, setConnectedNetworkAdapter] = useState<NetworkAdapter | undefined>(undefined);
+  const [pinnedProps, setPinnedProps] = useState<WlanSelectorEntryProps | undefined>(undefined);
+
+  const entries: [WlanBssEntry] = useSelector(Selectors.wlanBssEntries);
+  const networkAdapters: [NetworkAdapter] = useSelector(Selectors.networkAdapters);
+  const defaultIp = useSelector(Selectors.networkLocalIp);
+  const online = useSelector(Selectors.online);
 
-  const entries = useSelector(Selectors.wlanBssEntries);
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -23,6 +34,67 @@ function WlanSelector({ open }: { open: boolean }) {
     }
   }, [open]);
 
+  useEffect(() => {
+    setConnectedNetworkAdapter(networkAdapters.find((i) => i.ipv4 === defaultIp));
+  }, [networkAdapters, defaultIp]);
+
+  useEffect(() => {
+    setConnectedEntry(entries.find((entry) => entry.connected));
+  }, [online, entries, selected, connectedNetworkAdapter]);
+
+  const createLanPinnedProprs = function (): void {
+    setPinnedProps({
+      entry: {
+        ssid: connectedNetworkAdapter!.name,
+        bssid: connectedNetworkAdapter!.name,
+        channel_frequency: 0,
+        signal: 0,
+        connected: true,
+        connected_channel: false,
+      },
+      className: 'wlan-entry-connected',
+      selected: true,
+      onClick: () => {},
+      icon: (connectedNetworkAdapter!.type !== 'IEEE80211') ? 'FaComputer' : undefined,
+      loading: (connectedNetworkAdapter!.type === 'IEEE80211') ? true : false,
+      buttonDisabled: (connectedNetworkAdapter!.type === 'IEEE80211') ? false : true,
+    });
+  };
+
+  useEffect(() => {
+    // Priority matters! Online -> Lan -> Wifi -> Wifi not loaded
+    if (!online) {
+      setPinnedProps({
+        entry: {
+          ssid: t('placeholder.ethernet_disconnected'),
+          bssid: t('placeholder.ethernet_disconnected'),
+          channel_frequency: 0,
+          signal: 0,
+          connected: true,
+          connected_channel: false,
+        },
+        className: 'wlan-entry-connected',
+        selected: true,
+        onClick: () => {},
+        icon: 'TbWorldCancel',
+        loading: false,
+        buttonDisabled: true,
+      });
+    } else if (connectedNetworkAdapter && !connectedEntry) {
+      createLanPinnedProprs();
+    } else if (connectedEntry) {
+      setPinnedProps({
+        entry: connectedEntry,
+        className: 'wlan-entry-connected',
+        selected: true,
+        onClick: () => {},
+        buttonDisabled: false,
+      });
+    } else if (connectedNetworkAdapter) {
+      createLanPinnedProprs();
+    }
+  }, [connectedNetworkAdapter, connectedEntry, online]);
+
   let ssids = new Set<string>();
   let filtered = entries
     .toSorted((a, b) => b.signal - a.signal)
@@ -32,28 +104,49 @@ function WlanSelector({ open }: { open: boolean }) {
         return false;
       }
       ssids.add(ssid);
-      return true;
+      return !entry.connected;
     });
 
   return (
     <div className="wlan-selector">
       <BackgroundByLayersV2 prefix="wlan-selector" />
-      <div className="wlan-selector-entries">
-        {filtered.length === 0 && (
-          <div className="wlan-selector-empty">{t('network.not_found')}</div>
-        )}
-        {filtered.map((entry) => {
-          let ssid = entry.ssid || '__HIDDEN_SSID__';
-          return (
-            <WlanSelectorEntry
-              key={ssid}
-              entry={entry}
-              selected={selected === ssid}
-              onClick={() => setSelected(ssid)}
-            />
-          );
-        })}
-      </div>
+      { pinnedProps &&
+      <motion.div
+        key={pinnedProps.entry.ssid}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        initial={{ opacity: 0 }}
+        transition={{ duration: 0.4 }}
+      >
+        <WlanSelectorEntry {...pinnedProps} />
+      </motion.div>
+      }
+      <AnimatePresence>
+        <div className="wlan-selector-entries">
+          {filtered.length === 0 && (
+            <div className="wlan-selector-empty">{t('network.not_found')}</div>
+          )}
+          {filtered.map((entry) => {
+            let ssid = entry.ssid || '__HIDDEN_SSID__';
+            return (
+              <motion.div
+                key={entry.ssid}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                initial={{ opacity: 0 }}
+                transition={{ duration: 0.4 }}
+              >
+                <WlanSelectorEntry
+                  key={ssid}
+                  entry={entry}
+                  selected={selected === ssid}
+                  onClick={() => setSelected(ssid)}
+                />
+              </motion.div>
+            );
+          })}
+        </div>
+      </AnimatePresence>
       <div className="wlan-selector-footer">
         <span onClick={() => invoke(SeelenCommand.OpenFile, { path: 'ms-settings:network' })}>
           {t('network.more')}

src/apps/toolbar/modules/network/infra/WlanSelectorEntry.tsx

@@ -9,12 +9,18 @@ import { WlanBssEntry, WlanProfile } from '../domain';
 import { Icon } from '../../../../shared/components/Icon';
 import { cx } from '../../../../shared/styles';
 
-export function WlanSelectorEntry(props: {
+export interface WlanSelectorEntryProps {
   entry: WlanBssEntry;
   selected: boolean;
   onClick: () => void;
-}) {
-  let { entry, selected, onClick } = props;
+  className?: string;
+  icon?: string;
+  loading?: boolean;
+  buttonDisabled?: boolean;
+}
+
+export function WlanSelectorEntry(props: WlanSelectorEntryProps) {
+  let { entry, selected, onClick, icon, className, buttonDisabled } = props;
 
   let [loading, setLoading] = useState(false);
   let [showFields, setShowFields] = useState(false);
@@ -87,7 +93,9 @@ export function WlanSelectorEntry(props: {
   }
 
   let signalIcon = 'GrWifiNone';
-  if (entry.signal > 75) {
+  if (icon) {
+    signalIcon = icon;
+  } else if (entry.signal > 75) {
     signalIcon = 'GrWifi';
   } else if (entry.signal > 50) {
     signalIcon = 'GrWifiMedium';
@@ -98,7 +106,7 @@ export function WlanSelectorEntry(props: {
   return (
     <div
       key={entry.bssid}
-      className={cx('wlan-entry', {
+      className={cx('wlan-entry', className, {
         'wlan-entry-selected': selected,
       })}
       onClick={onClick}
@@ -131,7 +139,7 @@ export function WlanSelectorEntry(props: {
           />
         </form>
       )}
-      {selected && (
+      { (!buttonDisabled && selected) && (
         <div className="wlan-entry-actions">
           <Button type="primary" onClick={onConnection} loading={loading} disabled={loading}>
             {entry.connected ? t('network.disconnect') : t('network.connect')}

src/apps/toolbar/styles/global.css

@@ -136,40 +136,44 @@ body {
     display: flex;
     flex-direction: column;
     gap: 6px;
+  }
 
-    .wlan-selector-empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 12px;
+  .wlan-selector-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+  }
+
+  .wlan-entry {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    &.wlan-entry-connected {
+      margin-bottom: 12px;
     }
 
-    .wlan-entry {
+    .wlan-entry-info {
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
       gap: 6px;
 
-      .wlan-entry-info {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 6px;
-
-        .wlan-entry-info-ssid {
-          flex: 1;
-        }
+      .wlan-entry-info-ssid {
+        flex: 1;
       }
+    }
 
-      .wlan-entry-fields {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
+    .wlan-entry-fields {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
 
-      .wlan-entry-actions {
-        display: flex;
-        justify-content: flex-end;
-      }
+    .wlan-entry-actions {
+      display: flex;
+      justify-content: flex-end;
     }
   }
 

static/themes/default/theme.toolbar.css

@@ -181,6 +181,7 @@
   padding: 8px;
   flex: 1;
   overflow-y: auto;
+  border-top: solid 1px var(--color-gray-300);
 
   .wlan-selector-empty {
     font-style: italic;
@@ -193,12 +194,14 @@
   border-radius: 8px;
   gap: 10px;
 
+  transition: background-color 0.3s ease-in-out;
+
   &:hover {
     background-color: var(--color-gray-200);
   }
 
   &.wlan-entry-selected {
-    background-color: rgba(var(--config-accent-color-rgb), 0.2);
+    background-color: var(--color-gray-400);
   }
 }
 
@@ -214,6 +217,15 @@
   text-overflow: ellipsis;
 }
 
+.wlan-entry-selected.wlan-entry-connected {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  background-color: rgba(var(--config-accent-color-rgb), 0.2);
+
+  padding: 15px 20px;
+}
+
 .wlan-selector-footer {
   border-top: solid 1px var(--color-gray-300);
   padding: 8px 16px;