feat: add gain responsive

2026-07-22 22:33:14 +02:00
parent 5cee5a2047
commit 4dc557a255
29 changed files with 1128 additions and 908 deletions
@@ -0,0 +1,103 @@
+.notifications {
+  position: fixed;
+  right: var(--space-5);
+  bottom: var(--space-5);
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  width: 320px;
+  pointer-events: none;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+
+  padding: 10px var(--space-3);
+  border-radius: var(--radius-md);
+
+  font-size: 14px;
+
+  box-shadow: var(--shadow-md);
+
+  animation: notification-in var(--dur-slow) var(--ease-out) forwards;
+
+  pointer-events: auto;
+}
+
+.notification-out {
+  animation: notification-out var(--dur-slow) var(--ease-in) forwards;
+}
+
+.notification-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.notification-close:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.notification.error {
+  background: #b42318;
+  color: white;
+}
+
+.notification.success {
+  background: #15803d;
+  color: white;
+}
+
+.notification.warning {
+  background: #ca8a04;
+  color: white;
+}
+
+.notification-message {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes notification-in {
+  from {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes notification-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+}
@@ -0,0 +1,35 @@
+import type { Notification } from '../../types/types';
+import './Notifications.css';
+
+type Props = {
+  notifications: Notification[];
+  onRemove: (id: number) => void;
+  onHover: (id: number, hovering: boolean) => void;
+};
+
+export default function Notifications({ notifications, onRemove, onHover }: Props) {
+  return (
+    <div className="notifications">
+      {notifications.map((n) => (
+        <div
+          key={n.id}
+          className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
+          onMouseEnter={() => onHover(n.id, true)}
+          onMouseLeave={() => onHover(n.id, false)}
+        >
+          <span className="notification-message" title={n.message}>
+            {n.message}
+          </span>
+
+          <button
+            className="tab-close notification-close"
+            onClick={() => onRemove(n.id)}
+            aria-label="Dismiss notification"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}