From 13c559beb9346c53a05e5b906916e0708d39e6f5 Mon Sep 17 00:00:00 2001
From: Andrea <nullndr@proton.me>
Date: Sat, 3 May 2025 16:01:04 +0200
Subject: [PATCH] chore: add swaync

---
 .config/sway/config        |   6 +
 .config/swaync/config.json | 134 ++++++++++
 .config/swaync/style.css   | 487 +++++++++++++++++++++++++++++++++++++
 3 files changed, 627 insertions(+)
 create mode 100644 .config/swaync/config.json
 create mode 100644 .config/swaync/style.css

diff --git a/.config/sway/config b/.config/sway/config
index e152109..60b4d1d 100644
--- a/.config/sway/config
+++ b/.config/sway/config
@@ -34,6 +34,12 @@ set $WOBSOCK $XDG_RUNTIME_DIR/wob.sock
 exec rm -f $WOBSOCK && mkfifo $WOBSOCK && tail -f $WOBSOCK | wob
 exec systemctl --user import-environment DISPLAY WAYLAND_DISPLAY SWAYSOCK
 
+# Use swaync as notification daemon
+exec swaync
+
+# Toggle swaync control center
+bindsym $mod+Shift+n exec swaync-client -t -sw
+
 gaps inner 2
 gaps outer 2
 
diff --git a/.config/swaync/config.json b/.config/swaync/config.json
new file mode 100644
index 0000000..932bd09
--- /dev/null
+++ b/.config/swaync/config.json
@@ -0,0 +1,134 @@
+{
+	"$schema": "/etc/xdg/swaync/configSchema.json",
+	"positionX": "right",
+	"positionY": "top",
+	"layer": "overlay",
+	"control-center-layer": "top",
+	"layer-shell": true,
+	"cssPriority": "application",
+	"control-center-margin-top": 5,
+	"control-center-margin-bottom": 2,
+	"control-center-margin-right": 5,
+	"control-center-margin-left": 0,
+	"notification-2fa-action": true,
+	"notification-inline-replies": false,
+	"notification-icon-size": 64,
+	"notification-body-image-height": 100,
+	"notification-body-image-width": 200,
+	"timeout": 10,
+	"timeout-low": 5,
+	"timeout-critical": 0,
+	"fit-to-screen": true,
+	"relative-timestamps": true,
+	"control-center-width": 500,
+	"control-center-height": 600,
+	"notification-window-width": 500,
+	"keyboard-shortcuts": true,
+	"image-visibility": "when-available",
+	"transition-time": 200,
+	"hide-on-clear": false,
+	"hide-on-action": false,
+	"script-fail-notify": true,
+	"scripts": {
+		"example-script": {
+			"exec": "echo 'Do something...'",
+			"urgency": "Normal"
+		},
+		"example-action-script": {
+			"exec": "echo 'Do something actionable!'",
+			"urgency": "Normal",
+			"run-on": "action"
+		}
+	},
+	"notification-visibility": {
+		"example-name": {
+			"state": "muted",
+			"urgency": "Low",
+			"app-name": "Spotify"
+		}
+	},
+	"widgets": [
+		"inhibitors",
+		"title",
+		"mpris",
+		"buttons-grid",
+		"volume",
+		"backlight",
+		"dnd",
+		"notifications"
+	],
+	"widget-config": {
+		"inhibitors": {
+			"text": "Inhibitors",
+			"button-text": "Clear All",
+			"clear-all-button": true
+		},
+		"title": {
+			"text": "Notifications center",
+			"clear-all-button": true,
+			"button-text": "Clear All"
+		},
+		"label": {
+			"max-lines": 5,
+			"text": "Label Text"
+		},
+		"mpris": {
+			"image-size": 96,
+			"image-radius": 12
+		},
+		"buttons-grid": {
+			"actions": [
+				{
+					"label": "",
+					"command": "systemctl poweroff"
+				},
+				{
+					"label": "",
+					"command": "systemctl reboot"
+				},
+				{
+					"label": "󰍃",
+					"command": "swaymsg exit"
+				},
+				{
+					"label": "",
+					"command": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
+					"type": "toggle"
+				},
+				{
+					"label": "",
+					"command": "pactl set-source-mute @DEFAULT_SOURCE@ toggle",
+					"type": "toggle"
+				},
+				{
+					"label": "󰖩",
+					"command": "nm-connection-editor"
+				},
+				{
+					"label": "󰂯",
+					"command": "blueman-manager"
+				},
+				{
+					"label": "󰹑",
+					"command": "grimshot save area - | swappy -f -"
+				},
+				{
+					"label": "",
+					"command": "./home/andrea/.config/sway/scripts/toggle-screen-recorder.sh"
+				}
+			]
+		},
+		"volume": {
+			"show-per-app": true,
+			"show-per-app-icon": true,
+			"show-per-app-label": true,
+			"label": ""
+		},
+		"backlight": {
+			"label": "󰃠"
+		},
+		"dnd": {
+			"text": "Do Not Disturb"
+		}
+	}
+}
diff --git a/.config/swaync/style.css b/.config/swaync/style.css
new file mode 100644
index 0000000..8f05c4c
--- /dev/null
+++ b/.config/swaync/style.css
@@ -0,0 +1,487 @@
+.notification-row {
+  outline: none;
+}
+
+.notification-row:focus, .notification-row:hover {
+  background: #444444;
+}
+
+.notification-row .notification-background {
+  padding: 6px 12px;
+}
+
+.notification-row .notification-background .close-button {
+  /* The notification Close Button */
+  background: #FFFFFF;
+  color: #383838;
+  text-shadow: none;
+  padding: 0;
+  border-radius: 100%;
+  margin-top: 5px;
+  margin-right: 5px;
+  box-shadow: none;
+  border: none;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.notification-row .notification-background .close-button:hover {
+  /* box-shadow: none; */
+  background: #FFFFFF;
+  transition: background 0.15s ease-in-out;
+  border: none;
+}
+
+.notification-row .notification-background .notification {
+  /* The actual notification */
+  border-radius: 12px;
+  border: 1px solid #444444;
+  padding: 0;
+  transition: background 0.15s ease-in-out;
+  background: #303030;
+}
+
+.notification-row .notification-background .notification.low {
+  /* Low Priority Notification */
+}
+
+.notification-row .notification-background .notification.normal {
+  /* Normal Priority Notification */
+}
+
+.notification-row .notification-background .notification.critical {
+  /* Critical Priority Notification */
+}
+
+.notification-row .notification-background .notification .notification-action, .notification-row .notification-background .notification .notification-default-action {
+  padding: 4px;
+  margin: 0;
+  box-shadow: none;
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  transition: background 0.15s ease-in-out;
+}
+
+.notification-row .notification-background .notification .notification-action:hover, .notification-row .notification-background .notification .notification-default-action:hover {
+  /* -gtk-icon-effect: none; */
+  background: #383838;
+}
+
+.notification-row .notification-background .notification .notification-default-action {
+  /* The large action that also displays the notification summary and body */
+  border-radius: 12px;
+}
+
+.notification-row .notification-background .notification .notification-default-action:not(:only-child) {
+  /* When alternative actions are visible */
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content {
+  background: transparent;
+  border-radius: 12px;
+  padding: 4px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .image {
+  /* Notification Primary Image */
+  /* -gtk-icon-effect: none; */
+  border-radius: 100px;
+  /* Size in px */
+  margin: 4px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon {
+  /* Notification app icon (only visible when the primary image is set) */
+  /* -gtk-icon-effect: none;
+  -gtk-icon-shadow: 0 1px 4px black; */
+  margin: 6px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary {
+  /* Notification summary/title */
+  font-size: 16px;
+  font-weight: bold;
+  background: transparent;
+	color: #ffffff;
+  text-shadow: none;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time {
+  /* Notification time-ago */
+  font-size: 16px;
+  font-weight: bold;
+  background: transparent;
+	color: #ffffff;
+  text-shadow: none;
+  margin-right: 30px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body {
+  /* Notification body */
+  font-size: 15px;
+  font-weight: normal;
+  background: transparent;
+	color: #ffffff;
+  text-shadow: none;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content progressbar {
+  /* The optional notification progress bar */
+  margin-top: 4px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .body-image {
+  /* The "extra" optional bottom notification image */
+  margin-top: 4px;
+  background-color: white;
+  border-radius: 12px;
+  /* -gtk-icon-effect: none; */
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply {
+  /* The inline reply section */
+  margin-top: 4px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry {
+  background: #262626;
+	color: #ffffff;
+  caret-color: #ffffff;
+  border: 1px solid #FFFFFF;
+  border-radius: 12px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
+  margin-left: 4px;
+  background: #303030;
+  border: 1px solid #FFFFFF;
+  border-radius: 12px;
+	color: #ffffff;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
+  background: initial;
+  color: #969696;
+  border: 1px solid #FFFFFF;
+  border-color: transparent;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover {
+  background: #383838;
+}
+
+.notification-row .notification-background .notification .notification-action {
+  /* The alternative actions below the default action */
+  border-top: 1px solid #FFFFFF;
+  border-radius: 0px;
+  border-right: 1px solid #FFFFFF;
+}
+
+.notification-row .notification-background .notification .notification-action:first-child {
+  /* add bottom border radius to eliminate clipping */
+  border-bottom-left-radius: 12px;
+}
+
+.notification-row .notification-background .notification .notification-action:last-child {
+  border-bottom-right-radius: 12px;
+  border-right: none;
+}
+
+.notification-group {
+  /* Styling only for Grouped Notifications */
+}
+
+.notification-group.low {
+  /* Low Priority Group */
+}
+
+.notification-group.normal {
+  /* Low Priority Group */
+}
+
+.notification-group.critical {
+  /* Low Priority Group */
+}
+
+.notification-group .notification-group-buttons, .notification-group .notification-group-headers {
+  margin: 0 16px;
+	color: #ffffff;
+}
+
+.notification-group .notification-group-headers {
+  /* Notification Group Headers */
+}
+
+.notification-group .notification-group-headers .notification-group-icon {
+	color: #ffffff;
+}
+
+.notification-group .notification-group-headers .notification-group-header {
+	color: #ffffff;
+}
+
+.notification-group .notification-group-buttons {
+  /* Notification Group Buttons */
+}
+
+.notification-group.collapsed .notification-row .notification {
+  background-color: #303030;
+}
+
+.notification-group.collapsed .notification-row:not(:last-child) {
+  /* Top notification in stack */
+  /* Set lower stacked notifications opacity to 0 */
+}
+
+.notification-group.collapsed .notification-row:not(:last-child) .notification-action,
+.notification-group.collapsed .notification-row:not(:last-child) .notification-default-action {
+  opacity: 0;
+}
+
+.notification-group.collapsed:hover .notification-row:not(:only-child) .notification {
+  background-color: #383838;
+}
+
+.control-center {
+  /* The Control Center which contains the old notifications + widgets */
+  background: #383c4a;
+  border-radius: 10px;
+}
+
+.control-center .control-center-list-placeholder {
+  /* The placeholder when there are no notifications */
+  opacity: 0.5;
+}
+
+.control-center .control-center-list {
+  /* List of notifications */
+  background: transparent;
+}
+
+.control-center .control-center-list .notification {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
+}
+
+.control-center .control-center-list .notification .notification-default-action,
+.control-center .control-center-list .notification .notification-action {
+  transition: opacity 400ms ease-in-out, background 0.15s ease-in-out;
+}
+
+.control-center .control-center-list .notification .notification-default-action:hover,
+.control-center .control-center-list .notification .notification-action:hover {
+  background-color: #383838;
+}
+
+.blank-window {
+  /* Window behind control center and on all other monitors */
+  background: transparent;
+}
+
+.floating-notifications {
+  background: transparent;
+}
+
+.floating-notifications .notification {
+  box-shadow: none;
+}
+
+/*** Widgets ***/
+/* Title widget */
+.widget-title {
+	color: #ffffff;
+  margin: 8px;
+  font-size: 1.5rem;
+}
+
+.widget-title > button {
+  font-size: initial;
+	color: #ffffff;
+  text-shadow: none;
+  background: #303030;
+  border: 1px solid #FFFFFF;
+  box-shadow: none;
+  border-radius: 12px;
+}
+
+.widget-title > button:hover {
+  background: #383838;
+}
+
+/* DND widget */
+.widget-dnd {
+	color: #ffffff;
+  margin: 8px;
+  font-size: 1.1rem;
+}
+
+.widget-dnd > switch {
+  font-size: initial;
+  border-radius: 12px;
+  background: #303030;
+  border: 1px solid #FFFFFF;
+  box-shadow: none;
+}
+
+.widget-dnd > switch:checked {
+  background: #0080FF;
+}
+
+.widget-dnd > switch slider {
+  background: #383838;
+  border-radius: 12px;
+}
+
+/* Label widget */
+.widget-label {
+  margin: 8px;
+}
+
+.widget-label > label {
+  font-size: 1.1rem;
+}
+
+/* Mpris widget */
+@define-color mpris-album-art-overlay rgba(0, 0, 0, 0.55);
+@define-color mpris-button-hover rgba(0, 0, 0, 0.50);
+.widget-mpris {
+  /* The parent to all players */
+}
+
+.widget-mpris .widget-mpris-player {
+  padding: 8px;
+  padding: 16px;
+  margin: 16px 20px;
+  border-radius: 12px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
+  background-color: @mpris-album-art-overlay;
+}
+
+.widget-mpris .widget-mpris-player button:hover {
+  /* The media player buttons (play, pause, next, etc...) */
+  background: #383838;
+}
+
+.widget-mpris .widget-mpris-player .widget-mpris-album-art {
+  border-radius: 12px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
+}
+
+.widget-mpris .widget-mpris-player .widget-mpris-title {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.widget-mpris .widget-mpris-player .widget-mpris-subtitle {
+  font-size: 1.1rem;
+}
+
+.widget-mpris .widget-mpris-player > box > button {
+  /* Change player control buttons */
+}
+
+.widget-mpris .widget-mpris-player > box > button:hover {
+  background-color: @mpris-button-hover;
+}
+
+.widget-mpris > box > button {
+  /* Change player side buttons */
+}
+
+.widget-mpris > box > button:disabled {
+  /* Change player side buttons insensitive */
+}
+
+/* Buttons widget */
+.widget-buttons-grid {
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+  background-color: #303030;
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button {
+  background: #303030;
+  border-radius: 12px;
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
+  /* style given to the active toggle button */
+}
+
+/* Menubar widget */
+.widget-menubar > box > .menu-button-bar > button {
+  border: none;
+  background: transparent;
+}
+
+/* .AnyName { Name defined in config after #
+  background-color: #303030;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+}
+
+.AnyName>button {
+  background: transparent;
+  border: none;
+}
+
+.AnyName>button:hover {
+  background-color: #383838;
+} */
+.topbar-buttons > button {
+  /* Name defined in config after # */
+  border: none;
+  background: transparent;
+}
+
+/* Volume widget */
+.widget-volume {
+  background-color: #303030;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+}
+
+.widget-volume > box > button {
+  background: transparent;
+  border: none;
+}
+
+.per-app-volume {
+  background-color: #303030;
+  padding: 4px 8px 8px 8px;
+  margin: 0px 8px 8px 8px;
+  border-radius: 12px;
+}
+
+/* Backlight widget */
+.widget-backlight {
+  background-color: #303030;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 12px;
+}
+
+/* Inhibitors widget */
+.widget-inhibitors {
+  margin: 8px;
+  font-size: 1.5rem;
+}
+
+.widget-inhibitors > button {
+  font-size: initial;
+	color: #ffffff;
+  text-shadow: none;
+  background: #303030;
+  border: 1px solid #FFFFFF;
+  box-shadow: none;
+  border-radius: 12px;
+}
+
+.widget-inhibitors > button:hover {
+  background: #383838;
+}