fix(ags): only remove source of interval once

config/ags/js/misc/drag.js

@@ -27,23 +27,38 @@ export const Draggable = ({
 
   let gesture = Gtk.GestureDrag.new(w);
 
+  let leftAnim = 'transition: margin 0.5s ease, opacity 0.5s ease; ' +
+                 'margin-left: -' + Number(maxOffset + endMargin) + 'px; ' +
+                 'margin-right: ' + Number(maxOffset + endMargin) + 'px; ' +
+                 'margin-bottom: -70px; margin-top: -70px; opacity: 0;';
+
+  let rightAnim = 'transition: margin 0.5s ease, opacity 0.5s ease; ' +
+                  'margin-left: ' + Number(maxOffset + endMargin) + 'px; ' +
+                  'margin-right: -' + Number(maxOffset + endMargin) + 'px; ' +
+                  'margin-bottom: -70px; margin-top: -70px; opacity: 0;';
+
   w.child = Box({
+    properties: [
+      ['leftAnim', leftAnim],
+      ['rightAnim', rightAnim],
+    ],
     children: [
       ...children,
       child,
     ],
+    style: leftAnim,
     connections: [
 
       [gesture, box => {
         var offset = gesture.get_offset()[1];
 
         if (offset >= 0) {
-          box.setStyle('margin-left: ' + Number(offset + startMargin) + 'px; ' + 
+          box.setStyle('margin-left: ' + Number(offset + startMargin) + 'px; ' +
                        'margin-right: -' + Number(offset + startMargin) + 'px;');
         }
         else {
           offset = Math.abs(offset);
-          box.setStyle('margin-right: ' + Number(offset + startMargin) + 'px; ' + 
+          box.setStyle('margin-right: ' + Number(offset + startMargin) + 'px; ' +
                        'margin-left: -' + Number(offset + startMargin) + 'px;');
         }
         
@@ -56,22 +71,18 @@ export const Draggable = ({
 
         if (Math.abs(offset) > maxOffset) {
           if (offset > 0) {
-            box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' + 
-                         'margin-left: ' + Number(maxOffset + endMargin) + 'px; ' +
-                         'margin-right: -' + Number(maxOffset + endMargin) + 'px; ' +
-                         'margin-bottom: -70px; margin-top: -70px; opacity: 0;');
+            box.setStyle(rightAnim);
           }
           else {
-            box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' + 
-                         'margin-left: -' + Number(maxOffset + endMargin) + 'px; ' +
-                         'margin-right: ' + Number(maxOffset + endMargin) + 'px; ' +
-                         'margin-bottom: -70px; margin-top: -70px; opacity: 0;');
+            box.setStyle(leftAnim);
           }
           setTimeout(command, 500);
         }
         else {
-          box.setStyle('transition: margin 0.5s ease; margin-left: ' + startMargin + 'px; ' +
-                                                     'margin-right: ' + startMargin + 'px;');
+          box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' +
+                       'margin-left: ' + startMargin + 'px; ' +
+                       'margin-right: ' + startMargin + 'px; ' +
+                       'margin-bottom: unset; margin-top: unset; opacity: 1;');
           if (w.window)
             w.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
         }

config/ags/js/notifications/base.js

@@ -51,9 +51,9 @@ const NotificationIcon = ({ appEntry, appIcon, image }) => {
   });
 };
 
-export default ({ id, summary, body, actions, urgency, time, ...icon }) => Draggable({
+export default ({ id, summary, body, actions, urgency, time, command = i => {}, ...icon }) => Draggable({
   maxOffset: 200,
-  command: () => Notifications.close(id),
+  command: () => command(id),
   properties: [['hovered', false]],
   onHover: w => {
     if (!w._hovered) {

config/ags/js/notifications/center.js

@@ -37,10 +37,13 @@ const NotificationList = () => Box({
     if (box.children.length == 0) {
       box.children = Notifications.notifications
         .reverse()
-        .map(n => Notification(n));
+        .map(n => Notification({ ...n, command: i => Notifications.close(i), }));
     }
     else if (id) {
-      box.add(Notification(Notifications.getNotification(id)));
+      box.add(Notification({
+        ...Notifications.getNotification(id),
+        command: i => Notifications.close(i),
+      }));
       box.show_all();
     }
 

config/ags/js/notifications/popup.js

@@ -1,7 +1,8 @@
 import Notification from './base.js';
 const { Notifications } = ags.Service;
 const { Box, Revealer, Window } = ags.Widget;
-const { timeout } = ags.Utils;
+const { timeout, interval } = ags.Utils;
+const { source_remove } = imports.gi.GLib;
 
 const Popups = () => Box({
   vertical: true,
@@ -18,6 +19,10 @@ const Popups = () => Box({
         box.get_parent().reveal_child = false;
 
       timeout(200, () => {
+        if (box._map.get(id).interval) {
+          source_remove(box._map.get(id).interval);
+          box._map.get(id).interval = undefined;
+        }
         box._map.get(id)?.destroy();
         box._map.delete(id);
       });
@@ -27,11 +32,26 @@ const Popups = () => Box({
         return;
 
       box._map.delete(id);
-      box._map.set(id, Notification(Notifications.getNotification(id)));
+
+      box._map.set(id, Notification({
+        ...Notifications.getNotification(id),
+        command: i => Notifications.dismiss(i),
+      }));
+
       box.children = Array.from(box._map.values()).reverse();
       timeout(10, () => {
           box.get_parent().revealChild = true;
       });
+      box._map.get(id).interval = interval(4500, () => {
+        if (!box._map.get(id)._hovered) {
+          box._map.get(id).child.setStyle(box._map.get(id).child._leftAnim);
+
+          if (box._map.get(id).interval) {
+            source_remove(box._map.get(id).interval);
+            box._map.get(id).interval = undefined;
+          }
+        }
+      });
     }],
   ],
   connections: [
@@ -41,7 +61,7 @@ const Popups = () => Box({
   ],
 });
 
-const PopupList = ({ transition = 'slide_right' } = {}) => Box({
+const PopupList = ({ transition = 'none' } = {}) => Box({
   className: 'notifications-popup-list',
   style: 'padding: 1px',
   children: [