Add error notifications for network menu.

modules/menus/network/wifi/APStaging.js

@@ -63,6 +63,10 @@ const renderWapStaging = (self, network, staging, connecting) => {
                     console.error(
                       `Failed to connect to wifi: ${staging.value.ssid}... ${err}`,
                     );
+                    Utils.notify({
+                      summary: "Network",
+                      body: err,
+                    });
                   })
                   .then(() => {
                     connecting.value = "";

modules/menus/network/wifi/WirelessAPs.js

@@ -39,6 +39,13 @@ const renderWAPs = (self, network, staging, connecting) => {
           return wap.bssid === staging.value.bssid;
         };
 
+        const isDisconnecting = (wap) => {
+          if (wap.ssid === network.wifi.ssid) {
+            return network.wifi.state.toLowerCase() === "deactivating";
+          }
+          return false;
+        };
+
         const filteredWAPs = WAPs.filter(
           (ap) => ap.ssid !== "Unknown" && !isInStaging(ap),
         ).sort((a, b) => {
@@ -83,6 +90,11 @@ const renderWAPs = (self, network, staging, connecting) => {
                           .includes("secrets were required, but not provided")
                       ) {
                         staging.value = ap;
+                      } else {
+                        Utils.notify({
+                          summary: "Network",
+                          body: err,
+                        });
                       }
                       connecting.value = "";
                     });
@@ -128,7 +140,7 @@ const renderWAPs = (self, network, staging, connecting) => {
                     Widget.Revealer({
                       hpack: "end",
                       vpack: "start",
-                      reveal_child: ap.bssid === connecting.value,
+                      reveal_child: ap.bssid === connecting.value || isDisconnecting(ap),
                       child: Widget.Spinner({
                         vpack: "start",
                         class_name: "spinner wap",
@@ -154,11 +166,14 @@ const renderWAPs = (self, network, staging, connecting) => {
 
                             Utils.execAsync(
                               `nmcli connection delete ${connectionId} "${ap.ssid}"`,
-                            ).catch((err) =>
+                            )
+                              .then(() => (connecting.value = ""))
+                              .catch((err) => {
+                                connecting.value = "";
                                 console.error(
                                   `Error while forgetting "${ap.ssid}": ${err}`,
-                              ),
                                 );
+                              });
                           },
                         );
                       },

modules/menus/notifications/index.js

@@ -82,8 +82,13 @@ export default () => {
               vertical: true,
               setup: (self) => {
                 self.hook(notifs, () => {
+                  console.log(JSON.stringify(notifs, null, 2));
+
+                  const notifHasImg = (notif) => {
+                    return notif.image !== undefined && notif.image.length;
+                  };
                   const imageContainer = (notif) => {
-                    if (notif.image !== undefined) {
+                    if (notifHasImg(notif)) {
                       return [
                         Widget.Box({
                           class_name: "notification-card-image-container menu",
@@ -138,7 +143,9 @@ export default () => {
                       ];
                     }
 
-                    return [];
+                    return [Widget.Box({
+                      class_name: "spacer"
+                    })];
                   };
 
                   const NotificationIcon = ({
@@ -208,7 +215,7 @@ export default () => {
                               vpack: "center",
                               vertical: true,
                               hexpand: true,
-                              class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
+                              class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : " menu"}`,
                               children: [
                                 Widget.Box({
                                   vertical: false,
@@ -226,8 +233,9 @@ export default () => {
                                           hpack: "start",
                                           hexpand: true,
                                           vexpand: true,
-                                          max_width_chars:
+                                          max_width_chars: !notifHasImg(notif)
-                                            notif.image === undefined ? 27 : 20,
+                                            ? 27
+                                            : 20,
                                           truncate: "end",
                                           wrap: true,
                                           label: notif["summary"],
@@ -255,8 +263,9 @@ export default () => {
                                       justification: "left",
                                       truncate: "end",
                                       lines: 2,
-                                      max_width_chars:
+                                      max_width_chars: !notifHasImg(notif)
-                                        notif.image === undefined ? 35 : 28,
+                                        ? 35
+                                        : 28,
                                       wrap: true,
                                       class_name:
                                         "notification-card-body-label menu",

modules/notifications/index.js

@@ -16,8 +16,11 @@ export default () => {
       hexpand: true,
       setup: (self) => {
         self.hook(notifs, () => {
+          const notifHasImg = (notif) => {
+            return notif.image !== undefined && notif.image.length;
+          };
           const imageContainer = (notif) => {
-            if (notif.image !== undefined) {
+            if (notifHasImg(notif)) {
               return [
                 Widget.Box({
                   class_name: "notification-card-image-container",
@@ -112,7 +115,7 @@ export default () => {
                   vpack: "start",
                   vertical: true,
                   hexpand: true,
-                  class_name: `notification-card-content ${notif.image === undefined ? "noimg" : ""}`,
+                  class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : ""}`,
                   children: [
                     Widget.Box({
                       vertical: false,
@@ -128,8 +131,7 @@ export default () => {
                               hpack: "start",
                               hexpand: true,
                               vexpand: true,
-                              max_width_chars:
+                              max_width_chars: !notifHasImg(notif) ? 27 : 20,
-                                notif.image === undefined ? 27 : 20,
                               truncate: "end",
                               wrap: true,
                               label: notif["summary"],
@@ -156,7 +158,7 @@ export default () => {
                           justification: "left",
                           truncate: "end",
                           lines: 2,
-                          max_width_chars: notif.image === undefined ? 35 : 28,
+                          max_width_chars: !notifHasImg(notif) ? 35 : 28,
                           wrap: true,
                           class_name: "notification-card-body-label",
                           label: notif["body"],

scss/menus/notifications.scss

@@ -2,7 +2,7 @@
 
 .notification-card-container.menu {
   margin: 0em;
-  min-width: 26em;
+  min-width: 28.6em;
   min-height: 6em;
   background: $crust;
   border: 0.13em solid $surface0;

scss/menus/power.scss

@@ -20,12 +20,12 @@ window#verification .verification {
 
         .title {
             font-size: 1.5em;
-            color: $maroon;
+            color: $lavender;
             margin-bottom: 0.5em;
         }
 
         .desc {
-            color: $lavender;
+            color: $text;
             font-size: 1em;
             margin-bottom: 0.55em;
             padding: 1em 3em;

scss/notifications/popups.scss

@@ -99,3 +99,7 @@
     background: $maroon;
   }
 }
+
+.spacer {
+  margin-bottom: 0.75em;
+}

style.css

@@ -660,11 +660,11 @@ window#verification .verification .text-box {
 }
 window#verification .verification .text-box .title {
   font-size: 1.5em;
-  color: #eba0ac;
+  color: #b4befe;
   margin-bottom: 0.5em;
 }
 window#verification .verification .text-box .desc {
-  color: #b4befe;
+  color: #cdd6f4;
   font-size: 1em;
   margin-bottom: 0.55em;
   padding: 1em 3em;
@@ -1044,7 +1044,7 @@ image {
 }
 .notification-card-container.menu {
   margin: 0em;
-  min-width: 26em;
+  min-width: 28.6em;
   min-height: 6em;
   background: #11111b;
   border: 0.13em solid #313244;
@@ -1354,4 +1354,8 @@ image {
   background: #eba0ac;
 }
 
+.spacer {
+  margin-bottom: 0.75em;
+}
+
 /*# sourceMappingURL=style.css.map */