Blocked Users UI implemented.

src/main/resources/org/to/telegramfinalproject/CSS/chat.css

@@ -1,4 +1,3 @@
-/* دقیقاً فقط روی این دو دکمه اعمال می‌شود */
 #joinAction, #addContactAction {
     -fx-background-color: transparent, transparent, transparent, transparent;
     -fx-background-insets: 0,0,0,0;

src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css

@@ -989,3 +989,82 @@
     -fx-padding: 0 6 0 6;
     -fx-font-size: 14px;
 }
+
+.blocked-card {
+    -fx-background-color: #1f2a36;
+    -fx-background-radius: 10;
+    -fx-padding: 12;
+}
+
+.blocked-header {
+    -fx-padding: 8;
+}
+.blocked-title {
+    -fx-font-size: 16px;
+    -fx-font-weight: bold;
+    -fx-text-fill: white;
+}
+
+.blocked-count {
+    -fx-font-size: 13px;
+    -fx-text-fill: #999;
+    -fx-padding: 4 0;
+}
+
+.blocked-list {
+    -fx-background-color: #253544;
+}
+
+.blocked-row {
+    -fx-padding: 8;
+    -fx-background-color: transparent;
+}
+.blocked-row:hover {
+    -fx-background-color: #253544;
+}
+
+.blocked-name {
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+    -fx-text-fill: white;
+}
+.blocked-id {
+    -fx-font-size: 12px;
+    -fx-text-fill: #aaa;
+}
+
+.unblock-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #3a86ff;
+    -fx-cursor: hand;
+}
+
+.unblock-button:hover {
+    -fx-text-fill: #66aaff;
+}
+
+.blocked-info-label {
+    -fx-background-color: #2c3e50;   /* darker banner background */
+    -fx-text-fill: #bbb;             /* lighter muted text */
+    -fx-font-size: 12px;
+    -fx-wrap-text: true;
+    -fx-padding: 5;
+    -fx-background-radius: 4;
+}
+
+.blocked-list .thumb {
+    -fx-background-color: rgba(200, 200, 200, 0.5); /* lighter for dark bg */
+}
+
+/* Each list cell */
+.blocked-list .list-cell {
+    -fx-background-color: #1f2a36;
+    -fx-text-fill: #eeeeee;
+    -fx-padding: 8 12;
+    -fx-border-color: #2f2f2f;
+    -fx-border-width: 0 0 1 0;
+}
+
+.blocked-list .list-cell:hover {
+    -fx-background-color: #2a3a4a;
+}

src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css

@@ -989,3 +989,74 @@
     -fx-padding: 0 6 0 6;
     -fx-font-size: 14px;
 }
+
+/* Blocked Users card */
+.blocked-card {
+    -fx-background-color: white;
+    -fx-background-radius: 10;
+    -fx-padding: 12;
+}
+
+/* Header */
+.blocked-header {
+    -fx-padding: 8;
+}
+.blocked-title {
+    -fx-font-size: 16px;
+    -fx-font-weight: bold;
+    -fx-text-fill: black;
+}
+
+/* Count */
+.blocked-count {
+    -fx-font-size: 13px;
+    -fx-text-fill: #888;
+    -fx-padding: 4 0;
+}
+
+/* List */
+.blocked-list {
+    -fx-background-color: transparent;
+    -fx-border-color: transparent;
+}
+
+/* Row */
+.blocked-row {
+    -fx-padding: 8;
+    -fx-background-color: transparent;
+}
+.blocked-row:hover {
+    -fx-background-color: #f5f5f5;
+}
+
+/* Labels */
+.blocked-name {
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+    -fx-text-fill: black;
+}
+.blocked-id {
+    -fx-font-size: 12px;
+    -fx-text-fill: #666;
+}
+
+/* Button */
+.unblock-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #2196f3;
+    -fx-cursor: hand;
+}
+
+.unblock-button:hover {
+    -fx-text-fill: #66aaff;
+}
+
+.blocked-info-label {
+    -fx-background-color: #f5f5f5;   /* light gray background */
+    -fx-text-fill: #555;             /* muted text */
+    -fx-font-size: 12px;
+    -fx-wrap-text: true;
+    -fx-padding: 5;                 /* space inside like a banner */
+    -fx-background-radius: 4;        /* soft rounded edges */
+}
+

src/main/resources/org/to/telegramfinalproject/CSS/scrollpane.css

@@ -20,3 +20,20 @@
     -fx-background-color: rgba(100, 100, 100, 0.5); /* Semi-transparent thumb */
     -fx-background-radius: 3px;
 }
+
+
+.blocked-list .scroll-bar {
+    -fx-background-color: transparent;
+    -fx-opacity: 0;
+    -fx-pref-width: 6px;
+    -fx-background-radius: 3px;
+}
+
+.blocked-list:hover .scroll-bar {
+    -fx-opacity: 0.6;
+}
+
+.blocked-list .thumb {
+    -fx-background-color: rgba(100, 100, 100, 0.5);
+    -fx-background-radius: 3px;
+}

src/main/resources/org/to/telegramfinalproject/CSS/telegram-action.css

@@ -1,4 +1,4 @@
-/* رنگ‌ها */
+/* Colors */
 :root {
   -tg-bg:        #ffffff;
   -tg-sheet:     #ffffff;

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

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.control.*?>
+<?import javafx.geometry.Insets?>
+
+<StackPane xmlns:fx="http://javafx.com/fxml"
+           fx:controller="org.to.telegramfinalproject.UI.BlockedUsersController"
+           styleClass="overlay-root">
+
+    <!-- Dimmed background -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Card -->
+    <VBox fx:id="blockedCard" styleClass="blocked-card" spacing="8"
+          prefWidth="380" maxWidth="380"
+          prefHeight="500" maxHeight="500">
+
+        <!-- ===== Header ===== -->
+        <HBox alignment="CENTER_LEFT" spacing="10" styleClass="blocked-header">
+            <Button fx:id="backButton" styleClass="icon-button"/>
+            <Label text="Blocked users" styleClass="blocked-title"/>
+            <Pane HBox.hgrow="ALWAYS"/>
+            <Button fx:id="closeButton" styleClass="icon-button" text="✕"/>
+        </HBox>
+
+        <Separator/>
+
+        <Label text="Blocked users can't send you messages or add you to groups.
+They will not see your profile photos, online and last seen status."
+               wrapText="true"
+               prefHeight="160"
+               maxHeight="160"
+               styleClass="blocked-info-label"/>
+
+        <!-- ===== List of blocked users ===== -->
+        <Label fx:id="countLabel" text="0 blocked users" styleClass="blocked-count"/>
+
+        <ListView fx:id="blockedList" styleClass="blocked-list" VBox.vgrow="ALWAYS"/>
+    </VBox>
+</StackPane>