feat: added edit MIDI notes' attribute feature

src/components/piano-roll/PianoRoll.css

@@ -18,8 +18,6 @@
 /* Piano notes */
 .piano-note {
   position: absolute;
-  background-color: #ff5555;
-  /* Red color */
   border: 1px solid #999;
   border-radius: 2px;
   z-index: 10;
@@ -30,7 +28,6 @@
 
 .piano-note:hover {
   filter: brightness(1.1);
-  box-shadow: 0 0 5px rgba(255, 85, 85, 0.5);
 }
 
 .piano-note.dragging {
@@ -42,7 +39,6 @@
 
 .piano-note.resizing {
   opacity: 0.8;
-  box-shadow: 0 0 10px rgba(255, 85, 85, 0.7);
   z-index: 100;
 }
 
@@ -77,6 +73,70 @@
   /* Ensure toolbar and its dropdowns appear above piano roll content */
 }
 
+/* Note attribute bar */
+.note-attribute-bar {
+  height: 30px;
+  background-color: #252525;
+  border-bottom: 1px solid #3a3a3a;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  user-select: none;
+  gap: 24px;
+  font-size: 11px;
+  color: #aaa;
+}
+
+.note-attribute-bar .attr-item {
+  display: flex;
+  align-items: center;
+}
+
+.note-attribute-bar .attr-label {
+  color: #777;
+  margin-right: 4px;
+}
+
+.note-attribute-bar .attr-value {
+  color: #ddd;
+}
+
+.note-attribute-bar .quant-button {
+  font-size: 11px;
+  margin-left: 0;
+  padding: 2px 6px;
+}
+
+.note-attr-popup {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #2d2d2d;
+  border: 1px solid #444;
+  border-radius: 3px;
+  padding: 6px 8px;
+  z-index: 1500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  margin-top: 2px;
+  min-width: 120px;
+}
+
+.note-attr-input {
+  background-color: #1e1e1e;
+  border: 1px solid #555;
+  border-radius: 2px;
+  color: #e0e0e0;
+  font-size: 11px;
+  padding: 3px 6px;
+  width: 100%;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.note-attr-input:focus {
+  border-color: #4a6b8a;
+}
+
 .piano-roll-toolbar .tool-button {
   width: 20px;
   height: 20px;