New Channel UI updated.

src/main/java/org/to/telegramfinalproject/UI/NewChannelController.java

@@ -30,6 +30,8 @@ public class NewChannelController {
     @FXML private Button createButton;
     @FXML private StackPane overlayRoot;   // the root
     @FXML private Label descCounter;
+    @FXML private Label channelIdLabel;
+    @FXML private TextField channelIdField;
 
     private File channelImageFile;
 
@@ -67,6 +69,7 @@ public class NewChannelController {
         // Create button → validate name + submit
         createButton.setOnAction(e -> {
             String channelName = channelNameField.getText().trim();
+            String channelId = channelIdField.getText().trim();
             String description = channelDescField.getText().trim();
 
             if (channelName.isEmpty()) {
@@ -76,6 +79,13 @@ public class NewChannelController {
                 return;
             }
 
+            if (channelId.isEmpty()) {
+                // Apply error style
+                channelIdField.getStyleClass().add("error");
+                channelIdLabel.getStyleClass().add("error");
+                return;
+            }
+
             try {
                 // Load Add Members overlay
                 FXMLLoader loader = new FXMLLoader(getClass().getResource(
@@ -84,7 +94,7 @@ public class NewChannelController {
 
                 // Pass channel info to AddMembersController
                 AddSubscriberController controller = loader.getController();
-                controller.setChannelInfo(channelName, description, channelImageFile);
+                controller.setChannelInfo(channelName, channelId, description, channelImageFile);
 
                 // Close the current "New Channel" overlay
                 MainController.getInstance().closeOverlay(overlayRoot);
@@ -133,6 +143,14 @@ public class NewChannelController {
             }
         });
 
+        // Reset error state when typing
+        channelIdField.textProperty().addListener((obs, oldVal, newVal) -> {
+            if (!newVal.trim().isEmpty()) {
+                channelIdField.getStyleClass().remove("error");
+                channelIdLabel.getStyleClass().remove("error");
+            }
+        });
+
         // Auto-focus channel name on open
         Platform.runLater(() -> channelNameField.requestFocus());
 

src/main/resources/org/to/telegramfinalproject/Fxml/new_channel.fxml

@@ -17,7 +17,7 @@
           spacing="16"
           alignment="CENTER"
           prefWidth="400" maxWidth="400"
-          prefHeight="280" maxHeight="280">
+          prefHeight="380" maxHeight="380">
 
         <!-- Header Row: Picture + Name -->
         <HBox alignment="CENTER_LEFT" spacing="12">
@@ -42,6 +42,15 @@
             </VBox>
         </HBox>
 
+        <!-- ID -->
+        <VBox spacing="4" alignment="CENTER_LEFT">
+            <Label fx:id="channelIdLabel" text="Channel ID" styleClass="group-name-label"/>
+            <TextField fx:id="channelIdField"
+                       promptText="Enter channel ID"
+                       styleClass="group-name-field"
+                       HBox.hgrow="ALWAYS"/>
+        </VBox>
+
         <!-- Channel Description -->
         <VBox spacing="4" alignment="CENTER_LEFT">
             <Label fx:id="channelDescLabel" text="Description (optional)" styleClass="group-name-label"/>