🔧 - Added Notifications component with dock and system tray indicators

styles/components.css

@@ -301,3 +301,60 @@ menu > menuitem:hover > label {
 #music-player-indicator-button:active #music-player-indicator-active {
   color: var(--shadow);
 }
+
+/* Vertical mode specific styles */
+#music-player-container.vertical {
+  padding: 8px 4px;
+}
+
+#music-player-centerbox.vertical {
+  padding: 4px 0;
+}
+
+#music-player-centerbox.vertical #music-track {
+  font-size: 10px;
+  margin: 4px 0;
+}
+
+#music-player.vertical {
+  padding: 8px 4px;
+}
+
+/* Adjust controls layout for vertical mode */
+#music-controls.vertical {
+  padding: 2px;
+}
+
+#music-controls.vertical #music-prev,
+#music-controls.vertical #music-next,
+#music-controls.vertical #music-play-pause {
+  padding: 2px;
+  margin: 1px 0;
+}
+
+#music-controls.vertical #music-play-pause {
+  padding: 4px;
+}
+
+#music-controls.vertical label {
+  font-size: 12px;
+}
+
+#music-controls.vertical #music-play-pause label {
+  font-size: 14px;
+}
+
+/* Player indicators in vertical mode */
+#music-player-indicators.vertical {
+  padding: 2px;
+}
+
+#music-player-indicators.vertical #music-player-indicator-button {
+  padding: 1px;
+  margin: 1px 0;
+}
+
+#music-player-indicators.vertical #music-player-indicator,
+#music-player-indicators.vertical #music-player-indicator-active {
+  font-size: 10px;
+}

styles/indicators.css

@@ -39,6 +39,174 @@
 
 #network-label,
 #bluetooth-label,
-#recording-label {
+#recording-label,
+#notification-icon {
   font-size: 20px;
 }
+
+#button-bar-notifications {
+  border-radius: 12px;
+  padding: 4px;
+}
+
+#button-bar-notifications:hover {
+  background-color: var(--surface-bright);
+}
+
+
+#notifications-popup-main {
+  background-color: var(--surface);
+  margin:20px;
+}
+
+#notifications-popup-box {
+  background-color: var(--surface);
+}
+
+#notifications-scrolled {
+  background-color: var(--surface);
+  border-radius: 8px;
+}
+
+#notifications-scrolled scrollbar {
+  background-color: var(--surface-container);
+  border-radius: 4px;
+}
+
+#notifications-scrolled scrollbar slider {
+  background-color: var(--outline);
+  border-radius: 4px;
+  min-width: 8px;
+  min-height: 8px;
+}
+
+#notifications-scrolled scrollbar slider:hover {
+  background-color: var(--outline-variant);
+}
+
+/* Style close button in dock notifications */
+#notifications-popup-window #notif-close-button {
+  background-color: var(--surface-container);
+  border-radius: 50%;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px;
+  border: none;
+}
+
+#notifications-popup-window #notif-close-button:hover {
+  background-color: var(--error-container);
+}
+
+#notifications-popup-window #notif-close-label {
+  color: var(--on-surface-variant);
+  font-size: 14px;
+}
+
+#notifications-popup-window #notif-close-button:hover #notif-close-label {
+  color: var(--on-error-container);
+}
+
+#notifications-header {
+  padding: 8px;
+  border-bottom: 1px solid var(--outline);
+}
+
+#notifications-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--on-surface);
+}
+
+#dnd-toggle-button {
+  background-color: var(--surface-container);
+  color: var(--on-surface-variant);
+  border-radius: 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--outline);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+#dnd-toggle-button:hover {
+  background-color: var(--surface-bright);
+}
+
+#clear-all-button {
+  background-color: var(--primary);
+  color: var(--on-primary);
+  border-radius: 8px;
+  padding: 4px 8px;
+}
+
+#clear-all-button:hover {
+  background-color: var(--primary-bright);
+}
+
+#notifications-content {
+  padding: 8px;
+  background-color: var(--surface-container);
+  border-radius: 8px;
+  margin-top: 4px;
+  min-height: 200px;
+}
+
+#no-notifications-content {
+  background-color: var(--surface-container);
+  border-radius: 8px;
+  padding: 40px 20px;
+  margin: 20px;
+  min-width: 292px;
+}
+
+#no-notifications-icon {
+  font-size: 48px;
+  color: var(--on-surface-variant);
+  opacity: 0.6;
+}
+
+#no-notifications-message {
+  color: var(--on-surface-variant);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+#simple-notification-box {
+  background-color: var(--surface-bright);
+  border-radius: 8px;
+  padding: 8px;
+  margin: 4px 0;
+}
+
+#simple-notification-box:hover {
+  background-color: var(--surface-dim);
+}
+
+#notification-remove-button {
+  background-color: var(--error);
+  color: var(--on-error);
+  border-radius: 50%;
+  padding: 2px 6px;
+  font-weight: bold;
+}
+
+#notification-remove-button:hover {
+  background-color: var(--error-bright);
+}
+
+#no-notifications-content {
+  padding: 48px 32px;
+  min-height: 200px;
+}
+
+#no-notifications-icon {
+  font-size: 48px;
+  color: var(--outline);
+  opacity: 0.6;
+}
+
+#no-notifications-message {
+  font-size: 16px;
+  color: var(--on-surface);
+  opacity: 0.7;
+}