add notification

src/component/layout/index.js

@@ -1,6 +1,9 @@
 import { state } from '../state';
 
+import { Notification } from '../notification';
+
 import { node } from '../../utility/node';
+import { complexNode } from '../../utility/complexNode';
 import { clearChildNode } from '../../utility/clearChildNode';
 import { applyCSSVar } from '../../utility/applyCSSVar';
 import { applyCSSClass } from '../../utility/applyCSSClass';
@@ -26,7 +29,17 @@ layout.area = {
 
     const body = document.querySelector('body');
 
-    body.appendChild(layout.element.layout);
+    const notification = new Notification({
+      children: [
+
+        complexNode({ tag: 'p', text: 'Search in nightTab will be removed to comply with a <a href="https://developer.chrome.com/blog/cws-policy-updates-2024" target="_blank">Chrome policy change</a>. Filtering bookmarks will remain. Read more about this change on the <a href="https://github.com/zombieFox/nightTab/discussions/460" target="_blank">nightTab repo</a>.', complexText: true })
+
+      ]
+    });
+
+    body.append(notification.notification());
+
+    body.append(layout.element.layout);
 
     const resize = new ResizeObserver((entries) => {
 
@@ -34,7 +47,7 @@ layout.area = {
 
       let breakpoint;
 
-      entries.forEach(function(entry) {
+      entries.forEach(function (entry) {
 
         if (entry.contentRect.width <= size.sm) {
           breakpoint = 'xs';

src/component/notification/index.css

@@ -0,0 +1,30 @@
+:root {
+  --notification-space: 4;
+}
+
+:root {
+  --notification-header-background: var(--theme-primary-030);
+  --notification-body-background: var(--theme-primary-020);
+}
+
+.notification {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  z-index: var(--z-index-notification);
+}
+
+.notification-body {
+  background-color: hsl(var(--notification-body-background));
+  padding: calc((var(--notification-space) / 8) * 1em) calc((var(--notification-space) / 4) * 1em);
+  gap: calc((var(--notification-space) / 4) * 1em);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color var(--layout-transition-extra-fast);
+}

src/component/notification/index.js

@@ -0,0 +1,55 @@
+import { Button } from '../button';
+
+import { node } from '../../utility/node';
+
+import './index.css';
+
+export const Notification = function ({
+  children = [],
+} = {}) {
+
+  this.element = {
+    notification: node('div|class:notification'),
+    body: node('div|class:notification-body'),
+    message: node('div|class:notification-message', children),
+    dismiss: new Button({
+      text: 'Dismiss',
+      title: 'Dismiss',
+      size: 'small',
+      style: ['ring'],
+      func: () => {
+      }
+    }),
+  };
+
+  this.assemble = () => {
+
+    this.element.body.appendChild(this.element.message);
+
+    this.element.body.appendChild(this.element.dismiss.button);
+
+    this.element.notification.appendChild(this.element.body);
+
+  };
+
+  this.render = () => {
+
+    const body = document.querySelector('body');
+
+    body.appendChild(layout.element.notification);
+
+  };
+
+  this.close = () => {
+
+
+
+  };
+
+  this.notification = () => {
+    return this.element.notification;
+  };
+
+  this.assemble();
+
+};

src/style/zindex/index.css

@@ -5,8 +5,9 @@
   --z-index-toolbar: 3000;
   --z-index-edge: 4000;
   --z-index-dropdown: 5000;
-  --z-index-shade: 6000;
+  --z-index-notification: 6000;
-  --z-index-menu: 7000;
+  --z-index-shade: 7000;
-  --z-index-modal: 8000;
+  --z-index-menu: 8000;
-  --z-index-suggest: 9000;
+  --z-index-modal: 9000;
+  --z-index-suggest: 10000;
 }