Polish chat ui

2026-03-11 14:06:22 -06:00
parent e0def0f5a9
commit d98b4cc8e5
7 changed files with 176 additions and 9 deletions
--- a/src/main/java/module-info.java
+++ b/src/main/java/module-info.java
@@ -4,6 +4,7 @@ module org.example.petshopdesktop {
    requires javafx.web;
    requires java.sql;
    requires java.net.http;
+    requires java.prefs;
    requires com.fasterxml.jackson.databind;
    requires com.fasterxml.jackson.core;
    requires com.fasterxml.jackson.annotation;
--- a/src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java
+++ b/src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java
@@ -37,6 +37,7 @@ public class ChatRealtimeClient implements WebSocket.Listener {
    private Consumer<ConversationResponse> conversationListener;
    private Consumer<MessageResponse> messageListener;
    private Consumer<String> statusListener;
+    private volatile String currentStatus = "Chat disconnected";

    private ChatRealtimeClient() {
        this.httpClient = HttpClient.newBuilder()
@@ -58,6 +59,9 @@ public class ChatRealtimeClient implements WebSocket.Listener {

    public void setStatusListener(Consumer<String> statusListener) {
        this.statusListener = statusListener;
+        if (statusListener != null) {
+            statusListener.accept(currentStatus);
+        }
    }

    public void connect() {
@@ -286,6 +290,7 @@ public class ChatRealtimeClient implements WebSocket.Listener {
    }

    private void publishStatus(String status) {
+        currentStatus = status;
        if (statusListener != null) {
            statusListener.accept(status);
        }
--- a/src/main/java/org/example/petshopdesktop/controllers/ChatController.java
+++ b/src/main/java/org/example/petshopdesktop/controllers/ChatController.java
@@ -6,6 +6,7 @@ import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
+import javafx.scene.control.TextInputDialog;
 import javafx.scene.control.ListCell;
 import javafx.scene.control.ListView;
 import javafx.scene.control.ScrollPane;
@@ -31,6 +32,7 @@ import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.Optional;
+import java.util.prefs.Preferences;

 public class ChatController {
    private static final DateTimeFormatter TIME_FORMATTER = DateTimeFormatter.ofPattern("MMM d, HH:mm");
@@ -59,6 +61,8 @@ public class ChatController {
    @FXML
    private Label lblChatStatus;

+    private static final Preferences CHAT_PREFERENCES = Preferences.userNodeForPackage(ChatController.class);
+
    private final ObservableList<ConversationResponse> conversations = FXCollections.observableArrayList();
    private final Map<Long, String> customerLabels = new HashMap<>();
    private final ChatRealtimeClient realtimeClient = ChatRealtimeClient.getInstance();
@@ -107,7 +111,7 @@ public class ChatController {
        realtimeClient.setConversationListener(conversation -> Platform.runLater(() -> upsertConversation(conversation)));
        realtimeClient.setMessageListener(message -> Platform.runLater(() -> appendMessageIfSelected(message)));
        realtimeClient.setStatusListener(status -> Platform.runLater(() -> lblChatStatus.setText(status)));
-        realtimeClient.connect();
+        realtimeClient.subscribeToConversations();

        loadCustomers();
        loadConversations();
@@ -121,6 +125,35 @@ public class ChatController {
        }
    }

+    @FXML
+    void lblConversationTitleClicked() {
+        if (selectedConversation == null) {
+            return;
+        }
+
+        TextInputDialog dialog = new TextInputDialog(getConversationTitle(selectedConversation));
+        dialog.setTitle("Rename Conversation");
+        dialog.setHeaderText("Rename this conversation");
+        dialog.setContentText("Title:");
+        dialog.getEditor().setTextFormatter(new javafx.scene.control.TextFormatter<String>(change -> change.getControlNewText().length() <= 60 ? change : null));
+
+        Optional<String> result = dialog.showAndWait();
+        if (result.isEmpty()) {
+            return;
+        }
+
+        String alias = result.get().trim();
+        String key = conversationPreferenceKey(selectedConversation.getId());
+        if (alias.isEmpty() || alias.equals(defaultConversationTitle(selectedConversation))) {
+            CHAT_PREFERENCES.remove(key);
+        } else {
+            CHAT_PREFERENCES.put(key, alias);
+        }
+
+        lblConversationTitle.setText(getConversationTitle(selectedConversation));
+        lvConversations.refresh();
+    }
+
    @FXML
    void btnSendClicked() {
        if (selectedConversation == null) {
@@ -321,10 +354,19 @@ public class ChatController {
    }

    private String getConversationTitle(ConversationResponse conversation) {
+        String alias = CHAT_PREFERENCES.get(conversationPreferenceKey(conversation.getId()), null);
+        return alias != null && !alias.isBlank() ? alias : defaultConversationTitle(conversation);
+    }
+
+    private String defaultConversationTitle(ConversationResponse conversation) {
        String customerLabel = customerLabels.get(conversation.getCustomerId());
        return customerLabel != null ? customerLabel : "Customer #" + conversation.getCustomerId();
    }

+    private String conversationPreferenceKey(Long conversationId) {
+        return "chat.title." + conversationId;
+    }
+
    private String buildConversationMeta(ConversationResponse conversation) {
        String assignee;
        if (conversation.getStaffId() != null) {
--- a/src/main/resources/org/example/petshopdesktop/main-layout-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/main-layout-view.fxml
@@ -12,7 +12,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>

-<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
+<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" stylesheets="@styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
   <left>
      <VBox prefWidth="200.0" style="-fx-background-color: #2C3E50;" BorderPane.alignment="CENTER">
         <children>
@@ -47,7 +47,7 @@
                  <Separator prefWidth="200.0" style="-fx-background-color: #444444; -fx-opacity: 0.35;" />
               </children>
            </VBox>
-            <ScrollPane fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
+            <ScrollPane fitToWidth="true" hbarPolicy="NEVER" styleClass="sidebar-scroll-pane" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
               <content>
                  <VBox spacing="6.0" style="-fx-background-color: #2C3E50;">
                     <padding>
--- a/src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml
@@ -14,7 +14,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>

-<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
+<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
    </padding>
@@ -41,7 +41,7 @@
        </font>
    </Label>

-    <TabPane VBox.vgrow="ALWAYS">
+    <TabPane styleClass="analytics-tabs" VBox.vgrow="ALWAYS">
        <Tab text="Overview" closable="false">
            <VBox spacing="15.0">
                <padding>
--- a/src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml
@@ -14,7 +14,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>

-<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
+<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
    <left>
        <VBox prefWidth="290.0" spacing="12.0" style="-fx-background-color: #ffffff; -fx-border-color: #dbe4ee; -fx-border-width: 0 1 0 0;">
            <padding>
@@ -38,7 +38,7 @@
                </HBox>
                <Label fx:id="lblChatStatus" text="Connecting chat..." textFill="#64748b" />
                <Separator />
-                <ListView fx:id="lvConversations" prefHeight="620.0" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
+                <ListView fx:id="lvConversations" prefHeight="620.0" styleClass="chat-conversation-list" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
            </children>
        </VBox>
    </left>
@@ -48,12 +48,12 @@
                <Insets bottom="18.0" left="18.0" right="18.0" top="18.0" />
            </padding>
            <children>
-                <Label fx:id="lblConversationTitle" text="Select a conversation" textFill="#0f172a">
+                <Label fx:id="lblConversationTitle" onMouseClicked="#lblConversationTitleClicked" style="-fx-cursor: hand;" text="Select a conversation" textFill="#0f172a">
                    <font>
                        <Font name="System Bold" size="24.0" />
                    </font>
                </Label>
-                <ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
+                <ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" styleClass="chat-messages-scroll-pane" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
                    <content>
                        <VBox fx:id="vbMessages" spacing="10.0" style="-fx-background-color: rgba(255,255,255,0.72); -fx-background-radius: 18; -fx-padding: 18;" />
                    </content>
--- a/src/main/resources/org/example/petshopdesktop/styles/desktop-ui.css
+++ b/src/main/resources/org/example/petshopdesktop/styles/desktop-ui.css
@@ -0,0 +1,119 @@
+.sidebar-scroll-pane {
+    -fx-background-color: transparent;
+    -fx-background-insets: 0;
+    -fx-padding: 0 4 0 0;
+}
+
+.sidebar-scroll-pane > .viewport {
+    -fx-background-color: #2C3E50;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical,
+.chat-conversation-list .scroll-bar:vertical,
+.chat-messages-scroll-pane .scroll-bar:vertical {
+    -fx-background-color: transparent;
+    -fx-pref-width: 10;
+    -fx-padding: 0;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .track,
+.chat-conversation-list .scroll-bar:vertical .track,
+.chat-messages-scroll-pane .scroll-bar:vertical .track {
+    -fx-background-color: rgba(148, 163, 184, 0.18);
+    -fx-background-radius: 999;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .thumb,
+.chat-conversation-list .scroll-bar:vertical .thumb,
+.chat-messages-scroll-pane .scroll-bar:vertical .thumb {
+    -fx-background-color: rgba(203, 213, 225, 0.52);
+    -fx-background-radius: 999;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .increment-button,
+.sidebar-scroll-pane .scroll-bar:vertical .decrement-button,
+.chat-conversation-list .scroll-bar:vertical .increment-button,
+.chat-conversation-list .scroll-bar:vertical .decrement-button,
+.chat-messages-scroll-pane .scroll-bar:vertical .increment-button,
+.chat-messages-scroll-pane .scroll-bar:vertical .decrement-button {
+    -fx-padding: 0;
+    -fx-background-color: transparent;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .increment-arrow,
+.sidebar-scroll-pane .scroll-bar:vertical .decrement-arrow,
+.chat-conversation-list .scroll-bar:vertical .increment-arrow,
+.chat-conversation-list .scroll-bar:vertical .decrement-arrow,
+.chat-messages-scroll-pane .scroll-bar:vertical .increment-arrow,
+.chat-messages-scroll-pane .scroll-bar:vertical .decrement-arrow {
+    -fx-shape: '';
+    -fx-padding: 0;
+}
+
+.analytics-tabs {
+    -fx-tab-min-height: 34;
+    -fx-tab-max-height: 34;
+}
+
+.analytics-tabs > .tab-header-area {
+    -fx-padding: 0 0 8 0;
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab {
+    -fx-background-color: transparent;
+    -fx-background-radius: 12 12 0 0;
+    -fx-border-color: transparent transparent rgba(148, 163, 184, 0.35) transparent;
+    -fx-border-width: 0 0 2 0;
+    -fx-padding: 8 16 8 16;
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab:selected {
+    -fx-background-color: white;
+    -fx-border-color: transparent transparent #ff6b6b transparent;
+    -fx-effect: dropshadow(gaussian, rgba(15, 23, 42, 0.08), 10, 0.2, 0, 2);
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab .tab-label {
+    -fx-text-fill: #64748b;
+    -fx-font-weight: 700;
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab:selected .tab-label {
+    -fx-text-fill: #1f2937;
+}
+
+.analytics-tabs > .tab-header-area > .tab-header-background {
+    -fx-background-color: transparent;
+}
+
+.analytics-tabs > .tab-content-area {
+    -fx-background-color: transparent;
+    -fx-padding: 0;
+}
+
+.chat-conversation-list {
+    -fx-background-insets: 0;
+    -fx-background-color: transparent;
+}
+
+.chat-conversation-list .list-cell {
+    -fx-background-color: transparent;
+    -fx-background-radius: 14;
+    -fx-padding: 10 10 10 10;
+}
+
+.chat-conversation-list .list-cell:filled:selected,
+.chat-conversation-list .list-cell:filled:hover {
+    -fx-background-color: #eef2ff;
+}
+
+.chat-conversation-list .list-cell:filled:selected {
+    -fx-border-color: #c7d2fe;
+    -fx-border-radius: 14;
+    -fx-background-insets: 0;
+}
+
+.chat-messages-scroll-pane,
+.chat-messages-scroll-pane > .viewport {
+    -fx-background-color: transparent;
+}