Refactor Panel and StatusBar components by adding comments for clarity and improving accessibility with aria-labels

Frontend/src/components/Panel.jsx

@@ -173,7 +173,7 @@ const Panel = ({
         ))}
 
         <div className="panel-actions">
-          <button className="panel-action-btn">
+          {/* <button className="panel-action-btn">
             <span className="current-terminal">node - frontend</span>
             <ChevronDown size={16} />
           </button>
@@ -182,7 +182,7 @@ const Panel = ({
           </button>
           <button className="panel-action-btn">
             <Maximize2 size={16} />
-          </button>
+          </button> */}
           <button className="panel-close-btn" onClick={onClose}>
             <X size={16} />
           </button>

Frontend/src/components/StatusBar.jsx

@@ -1,10 +1,11 @@
 import React from "react";
-"use client"
 
 const StatusBar = ({ togglePanel, panelVisible }) => {
   return (
     <div className="status-bar">
+      {/* Left Section of the Status Bar */}
       <div className="status-bar-left">
+        {/* Branch Indicator */}
         <div className="status-item">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -16,6 +17,7 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
+            aria-label="Branch Icon"
           >
             <line x1="6" y1="3" x2="6" y2="15"></line>
             <circle cx="18" cy="6" r="3"></circle>
@@ -25,6 +27,7 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
           <span>main</span>
         </div>
 
+        {/* Error Indicator */}
         <div className="status-item">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -36,30 +39,41 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
+            aria-label="Error Icon"
           >
             <polyline points="20 6 9 17 4 12"></polyline>
           </svg>
           <span>0 errors</span>
         </div>
 
-        <button className="status-item status-button" onClick={togglePanel}>
+        {/* Toggle Terminal Button */}
+        <button
+          className="status-item status-button"
+          onClick={togglePanel}
+          aria-label="Toggle Terminal"
+        >
           <span>{panelVisible ? "Hide Terminal" : "Show Terminal"}</span>
         </button>
       </div>
 
+      {/* Right Section of the Status Bar */}
       <div className="status-bar-right">
+        {/* Line and Column Indicator */}
         <div className="status-item">
           <span>Ln 1, Col 1</span>
         </div>
 
+        {/* Spaces Indicator */}
         <div className="status-item">
           <span>Spaces: 2</span>
         </div>
 
+        {/* Encoding Indicator */}
         <div className="status-item">
           <span>UTF-8</span>
         </div>
 
+        {/* Connection Status */}
         <div className="status-item">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -71,6 +85,7 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
+            aria-label="Connection Icon"
           >
             <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
             <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
@@ -80,6 +95,7 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
           <span>Connected</span>
         </div>
 
+        {/* Bell Icon */}
         <div className="status-item">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -91,6 +107,7 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
+            aria-label="Bell Icon"
           >
             <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
             <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
@@ -98,8 +115,7 @@ const StatusBar = ({ togglePanel, panelVisible }) => {
         </div>
       </div>
     </div>
-  )
-}
-
-export default StatusBar
+  );
+};
 
+export default StatusBar;