Merge pull request #1 from kkanden/patch-1

Fix typo in README

README.md

@@ -34,5 +34,5 @@ environment.systemPackages = [ inputs.tpanel.packages.${system}.default ];
 # Add this in your HomeManager config
 home.packages = [ inputs.tpanel.packages.${system}.default ];
 ```
-## Ooutdated Screenshot
+## Outdated Screenshot
 ![full](https://raw.githubusercontent.com/tuxdotrs/tpanel/refs/heads/main/assets/gallery/full.png)

widgets/notifications/manager.ts

@@ -0,0 +1,50 @@
+import GLib from "gi://GLib";
+
+type TimeoutManager = {
+  setupTimeout: () => void;
+  clearTimeout: () => void;
+  handleHover: () => void;
+  handleHoverLost: () => void;
+  cleanup: () => void;
+};
+
+export const createTimeoutManager = (
+  dismissCallback: () => void,
+  timeoutDelay: number,
+): TimeoutManager => {
+  let isHovered = false;
+  let timeoutId: number | null = null;
+
+  const clearTimeout = () => {
+    if (timeoutId !== null) {
+      GLib.source_remove(timeoutId);
+      timeoutId = null;
+    }
+  };
+
+  const setupTimeout = () => {
+    clearTimeout();
+
+    if (!isHovered) {
+      timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, timeoutDelay, () => {
+        clearTimeout();
+        dismissCallback();
+        return GLib.SOURCE_REMOVE;
+      });
+    }
+  };
+
+  return {
+    setupTimeout,
+    clearTimeout,
+    handleHover: () => {
+      isHovered = true;
+      clearTimeout();
+    },
+    handleHoverLost: () => {
+      isHovered = false;
+      setupTimeout();
+    },
+    cleanup: clearTimeout,
+  };
+};

widgets/notifications/notification.tsx

@@ -3,6 +3,8 @@ import Adw from "gi://Adw";
 import AstalNotifd from "gi://AstalNotifd";
 import GLib from "gi://GLib";
 import Pango from "gi://Pango";
+import { createTimeoutManager } from "./manager";
+import { onCleanup, onMount } from "ags";
 
 const isIcon = (icon?: string | null) => {
   const iconTheme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default()!);
@@ -33,7 +35,20 @@ const urgency = (n: AstalNotifd.Notification) => {
 const { VERTICAL } = Gtk.Orientation;
 const { START, END, CENTER } = Gtk.Align;
 
+// Keep track of notification validity
+const TIMEOUT_DELAY = 3000;
+
 export const Notification = ({ n }: { n: AstalNotifd.Notification }) => {
+  const timeoutManager = createTimeoutManager(() => n.dismiss(), TIMEOUT_DELAY);
+
+  onMount(() => {
+    timeoutManager.setupTimeout();
+  });
+
+  onCleanup(() => {
+    timeoutManager.cleanup();
+  });
+
   return (
     <Adw.Clamp maximumSize={400}>
       <box
@@ -42,6 +57,11 @@ export const Notification = ({ n }: { n: AstalNotifd.Notification }) => {
         orientation={VERTICAL}
         spacing={20}
       >
+        <Gtk.EventControllerMotion
+          onEnter={() => timeoutManager.handleHover()}
+          onLeave={() => timeoutManager.handleHoverLost()}
+        />
+
         <box class="header" spacing={10}>
           {(n.appIcon || isIcon(n.desktopEntry)) && (
             <image