Additional work on the Data page redesign

frontend/src/components/SortButton/SortButton.tsx

@@ -27,7 +27,7 @@ const SortButton: React.FC<Props> = ({ options = defaultOptions, onSelect }) =>
     onSelect(option);
   };
   return (
-    <div data-testId="sort-button" className={styles.wrapper}>
+    <div data-testid="sort-button" className={styles.wrapper}>
       <div className={styles.filterButton} id="dateFilterBtn" onClick={onClickHandler}>
         <SortIcon width={16} height={16} />
       </div>

frontend/src/components/VerticalResizableComponent/CommentModal/CommentModal.module.scss

@@ -0,0 +1,83 @@
+.modal {
+  background: #161b22 !important;
+  border-radius: 12px !important;
+  border: 1px solid #30363d;
+  box-shadow: 0 16px 48px rgb(0 0 0 / 70%) !important;
+}
+
+.modalContent {
+  background: #161b22;
+  color: #c9d1d9;
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modalHeader {
+  padding: 20px;
+  border-bottom: 1px solid #21262d;
+}
+
+.modalHeader h3 {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.modalBody {
+  padding: 20px;
+}
+
+.modalBody p {
+  color: #c9d1d9;
+  font-size: 14px;
+  line-height: 1.6;
+  display: flex;
+}
+
+.commentTextarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 10px 0 10px 10px;
+  background: #0d1117;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  color: #c9d1d9;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  resize: vertical;
+  outline: none;
+}
+
+.modalFooter {
+  padding: 16px 20px;
+  border-top: 1px solid #21262d;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.modalBtn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.modalBtnSecondary {
+  background: #21262d;
+  color: #c9d1d9;
+}
+
+.modalBtnPrimary {
+  background: #238636;
+  color: white;
+}
+
+.modalBtnDelete {
+  background: #da3633;
+}

frontend/src/components/VerticalResizableComponent/CommentModal/CommentModal.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import styles from "./CommentModal.module.scss";
+import { useSelector } from "react-redux";
+import { getSelectedSnapshot } from "../../../stores/SnapshotsStore";
+import { SnapshotComment } from "../../../stores/SnapshotsStore/api/SnapshotsApi";
+import { classNames } from "../../../utils/classnames";
+import { Dialog } from "@mui/material";
+import { OnSaveHandlerProps } from "../SnapshotComments/SnapshotComments";
+
+type Props = {
+  mode: "add" | "edit" | "delete";
+  comment?: SnapshotComment;
+  handleOnClose: () => void;
+  handleOnSave: ({ mode, comment, commentText }: OnSaveHandlerProps) => Promise<void>;
+};
+
+const CommentModal: React.FC<Props> = ({ mode, comment, handleOnClose, handleOnSave }) => {
+  const selectedSnapshot = useSelector(getSelectedSnapshot);
+  const [commentText, setCommentText] = useState<string>(comment?.value ?? "");
+
+  if (!selectedSnapshot) {
+    return null;
+  }
+  let title = "Add comment";
+  if (mode === "edit") {
+    title = "Edit comment";
+  } else if (mode === "delete") {
+    title = "Delete comment";
+  }
+
+  return (
+    <Dialog classes={{ paper: styles.modal }} open={true} onClose={handleOnClose}>
+      <div className={styles.modalContent}>
+        <div className={styles.modalHeader}>
+          <h3>{title}</h3>
+        </div>
+        <div className={styles.modalBody}>
+          {mode !== "delete" && (
+            <textarea
+              value={commentText}
+              onChange={(e) => setCommentText(e.target.value)}
+              className={styles.commentTextarea}
+              id="commentTextarea"
+              placeholder="Add your notes..."
+            />
+          )}
+          {mode === "delete" && <p>Are you sure you want to delete this comment? This action cannot be undone.</p>}
+        </div>
+        <div className={styles.modalFooter}>
+          <button className={classNames(styles.modalBtn, styles.modalBtnSecondary)} onClick={handleOnClose}>
+            Cancel
+          </button>
+          <button
+            className={classNames(styles.modalBtn, styles.modalBtnPrimary, mode === "delete" && styles.modalBtnDelete)}
+            onClick={() => handleOnSave({ mode, comment, commentText })}
+          >
+            {mode === "delete" ? "Yes, Delete" : "Save"}
+          </button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default CommentModal;

frontend/src/components/VerticalResizableComponent/CommentModal/index.ts

@@ -0,0 +1 @@
+export { default } from "./CommentModal";

frontend/src/components/VerticalResizableComponent/SnapshotComments/SnapshotComments.module.scss

@@ -0,0 +1,139 @@
+
+.commentSection {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #21262d;
+}
+
+.commentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.commentsList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.commentItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.commentItemHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 20px;
+}
+
+.commentTimestamp {
+  font-size: 11px;
+  color: #7d8590;
+  line-height: 20px;
+}
+
+.commentItemAction {
+  gap: 4px;
+  align-items: center;
+  display: inline-flex;
+  min-width: 50px;
+  min-height: 20px;
+}
+
+.editCommentBtn {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: #21262d;
+  border: 1px solid #30363d;
+  border-radius: 4px;
+  color: #c9d1d9;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.deleteCommentBtn {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: #21262d;
+  border: 1px solid #30363d;
+  border-radius: 4px;
+  color: #c9d1d9;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.editCommentBtn:hover {
+  background: #30363d;
+  border-color: #58a6ff;
+}
+
+.commentItemAction:hover .editCommentBtn {
+  display: inline;
+}
+
+.deleteCommentBtn:hover {
+  background: #30363d;
+  border-color: #f85149;
+  color: #f85149;
+}
+
+.commentItemAction:hover .deleteCommentBtn {
+  display: inline;
+}
+
+.commentItemText {
+  font-size: 13px;
+  color: #c9d1d9;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  margin-bottom: 8px;
+}
+
+.commentLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.addCommentBtn {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: #21262d;
+  border: 1px solid #30363d;
+  border-radius: 4px;
+  color: #c9d1d9;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center !important;
+  justify-content: center;
+}
+
+.addCommentBtn:hover {
+  background: #30363d;
+  border-color: #58a6ff;
+}
+
+.noComment {
+  color: #7d8590;
+  font-style: italic;
+  font-size: 14px;
+}