init layouts and styles for user notifications view

packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss

@@ -0,0 +1,159 @@
+.tabContainer {
+  position: relative;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 40px;
+  .tabs {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    li {
+      position: relative;
+      margin: 0 20px 0 0;
+
+      a {
+        &.tabUnread,
+        &.tabSaved,
+        &.tabArchived {
+          display: flex;
+          text-decoration: none;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          position: relative;
+          z-index: 1;
+          .tabicon {
+            width: 20px;
+            margin-right: 5px;
+          }
+          &.tabUnread .tabicon {
+            width: 18px;
+          }
+          &.tabArchived .tabicon {
+            width: 16px;
+          }
+          span {
+            background-color: #eee;
+            padding: 2px 5px;
+            margin: 0 0 0 10px;
+            display: inline-block;
+            border-radius: 4px;
+            color: #000;
+            font-weight: normal;
+            transition: background-color 0.3s, color 0.3s;
+          }
+          &.active {
+            span {
+              color: #fff;
+              background-color: #b20000;
+            }
+          }
+
+          &:hover {
+            color: #555;
+          }
+        }
+      }
+    }
+  }
+}
+.notificationsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  .notificationAccordion {
+    border: 1px solid #eee;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+
+      .accordiontitle{
+        flex-grow: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      h3 {
+        font-weight: normal;
+        margin: 0;
+      }
+      button {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+        h3 {
+          text-decoration: underline;
+          color: var(--on-dark-aqua);
+        }
+        &:disabled {
+          pointer-events: none;
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+      .readbutton{
+        color: var(--on-dark-aqua);
+        background-color:#f3fdff;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        padding: 5px;
+        font-size: 13px;
+        text-transform: uppercase;
+        margin-right: 5px;
+        > i {
+          margin-right: 5px;
+        }
+      }
+      .actions {
+        display: flex;
+        align-items: stretch;
+        .notificationdeny, .notificationapprove {
+          color: #127B22;
+          background-color: #F5FFF5;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          padding: 5px;
+          font-size: 13px;
+          text-transform: uppercase;
+          margin-right: 5px;
+          > i {
+            margin-right: 5px;
+          }
+        }
+        .notificationdeny {
+          color: #770D0D;
+          background-color: #FFF5F5;
+        }
+
+        .accordionicon {
+          max-width: 21px;
+          height: auto;
+          display: inline-block;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          padding: 5px;
+          margin-right: 5px;
+          &.archiveicon {
+            max-width: 18px;
+          }
+          &.saveicon {
+            max-width: 23px;
+          }
+        }
+      }
+    }
+    .accordionbody{
+      padding: 10px;
+      border-top: 1px solid #eee;
+    }
+  }
+}

packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from "react"
+import styles from "./scss/usernotifications.module.scss"
+import { Tooltip } from "@openneuro/components/tooltip"
+import iconUnread from "../../assets/icon-unread.png"
+import iconSaved from "../../assets/icon-saved.png"
+import iconArchived from "../../assets/icon-archived.png"
+
+export const NotificationAccordion = ({ notification, onUpdate }) => {
+  const { id, title, content, status, type, approval } = notification
+
+  const hasContent = content && content.trim().length > 0
+
+  const [isOpen, setIsOpen] = useState(false)
+  const toggleAccordion = () => setIsOpen(!isOpen)
+
+  const handleApprovalChange = (approvalStatus) => {
+    onUpdate(id, { approval: approvalStatus })
+  }
+
+  const handleStatusChange = (newStatus) => {
+    onUpdate(id, { status: newStatus })
+  }
+
+  return (
+    <li
+      className={`${styles.notificationAccordion} ${isOpen ? styles.open : ""}`}
+    >
+      <div className={styles.header}>
+        {/* Render title as button if content exists, otherwise as plain text */}
+        <h3 className={styles.accordiontitle}>{title}</h3>
+
+        {hasContent && (
+          <button className={styles.readbutton} onClick={toggleAccordion}>
+            {isOpen
+              ? (
+                <span>
+                  <i className="fa fa-times"></i> Close
+                </span>
+              )
+              : (
+                <span>
+                  <i className="fa fa-eye"></i> Review
+                </span>
+              )}
+          </button>
+        )}
+        <div className={styles.actions}>
+          {type === "approval" && (
+            <>
+              {(approval === "not provided" || approval === "approved") && (
+                <button
+                  className={`${styles.notificationapprove} ${
+                    approval === "approved" ? styles.active : ""
+                  }`}
+                  onClick={() => handleApprovalChange("approved")}
+                  disabled={approval === "approved"}
+                >
+                  <i className="fa fa-check"></i>{" "}
+                  {approval === "approved" ? "Approved" : "Approve"}
+                </button>
+              )}
+
+              {(approval === "not provided" || approval === "denied") && (
+                <button
+                  className={`${styles.notificationdeny} ${
+                    approval === "denied" ? styles.active : ""
+                  }`}
+                  onClick={() => handleApprovalChange("denied")}
+                  disabled={approval === "denied"}
+                >
+                  <i className="fa fa-times"></i>{" "}
+                  {approval === "denied" ? "Denied" : "Deny"}
+                </button>
+              )}
+            </>
+          )}
+          {/* Render actions based on the notification's status */}
+          {status === "unread" && (
+            <>
+              <Tooltip tooltip="Save and mark as read">
+                <button
+                  className={styles.save}
+                  onClick={() => handleStatusChange("saved")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.saveicon}`}
+                    src={iconSaved}
+                    alt=""
+                  />
+                  <span className="sr-only">Save</span>
+                </button>
+              </Tooltip>
+              <Tooltip tooltip="Archive">
+                <button
+                  className={styles.archive}
+                  onClick={() => handleStatusChange("archived")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.archiveicon}`}
+                    src={iconArchived}
+                    alt=""
+                  />
+                  <span className="sr-only">Archive</span>
+                </button>
+              </Tooltip>
+            </>
+          )}
+          {status === "saved" && (
+            <>
+              <Tooltip tooltip="Mark as Unread">
+                <button
+                  className={styles.unread}
+                  onClick={() => handleStatusChange("unread")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.unreadicon}`}
+                    src={iconUnread}
+                    alt=""
+                  />
+                  <span className="sr-only">Mark as Unread</span>
+                </button>
+              </Tooltip>
+              <Tooltip tooltip="Archive">
+                <button
+                  className={styles.archive}
+                  onClick={() => handleStatusChange("archived")}
+                >
+                  <img
+                    className={`${styles.accordionicon} ${styles.archiveicon}`}
+                    src={iconArchived}
+                    alt=""
+                  />
+                  <span className="sr-only">Archive</span>
+                </button>
+              </Tooltip>
+            </>
+          )}
+          {status === "archived" && (
+            <Tooltip tooltip="Mark as Unread">
+              <button
+                className={styles.unarchive}
+                onClick={() => handleStatusChange("unread")}
+              >
+                <img
+                  className={`${styles.accordionicon} ${styles.unreadicon}`}
+                  src={iconUnread}
+                  alt=""
+                />
+                <span className="sr-only">Unarchive</span>
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+      {isOpen && hasContent && (
+        <div className={styles.accordionbody}>{content}</div>
+      )}
+    </li>
+  )
+}

packages/openneuro-app/src/scripts/users/user-notification-list.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react"
+import styles from "./scss/usernotifications.module.scss"
+import { NotificationAccordion } from "./user-notification-accordion"
+
+// NotificationsList Component
+export const NotificationsList = ({ notificationdata }) => {
+  const [notifications, setNotifications] = useState(notificationdata)
+
+  const handleUpdateNotification = (id, updates) => {
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) =>
+        notification.id === id ? { ...notification, ...updates } : notification
+      )
+    )
+  }
+  return (
+    <ul className={styles.notificationsList}>
+      {notifications.map((notification) => (
+        <NotificationAccordion
+          key={notification.id}
+          notification={notification}
+          onUpdate={handleUpdateNotification}
+        />
+      ))}
+    </ul>
+  )
+}