add administrator notification bell

src/styles.css

@@ -174,6 +174,70 @@ button:hover:not(:disabled) {
   color: var(--ed-dim);
   font-size: 18px;
 }
+.notification-wrap {
+  position: relative;
+}
+.notification-button {
+  position: relative;
+}
+.notification-dot {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ed-warn);
+}
+.notification-popover {
+  position: absolute;
+  z-index: 5;
+  top: 34px;
+  right: 0;
+  width: 320px;
+  max-height: 420px;
+  overflow: auto;
+  border: 1px solid var(--ui-line);
+  background: var(--ed-panel);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
+}
+.notification-heading,
+.notification-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.notification-heading {
+  padding: 9px 10px;
+  border-bottom: 1px solid var(--ui-divider);
+  color: var(--ed-fg);
+  font: 600 11px var(--font-data);
+  letter-spacing: 0.12em;
+}
+.notification-item {
+  padding: 10px;
+  border-bottom: 1px solid var(--ui-divider);
+  opacity: 0.65;
+}
+.notification-item.unseen {
+  opacity: 1;
+  background: var(--ui-surface);
+}
+.notification-title {
+  color: var(--ed-fg);
+  font-weight: 600;
+}
+.notification-message {
+  margin: 6px 0 9px;
+  color: var(--ed-dim);
+  font-size: 11px;
+  line-height: 1.4;
+}
+.notification-empty {
+  padding: 18px 10px;
+  color: var(--ed-dim);
+  font: 11px var(--font-data);
+}
 .workspace {
   display: grid;
   grid-template-columns: 214px 1fr;